datatables zone de liste déroulante ajouter une colonne

J'ai une table de données à l'aide de Datatables. J'ai créé et rempli le tableau comme indiqué ci-dessous. Maintenant, j'ai besoin de mettre en œuvre une zone de liste déroulante (à supposer que j'ai obtenu en 2010, 2011,2012) pour permettre à l'utilisateur de sélectionner une année . ensuite, lorsque l'utilisateur clique sur Afficher ou Modifier un lien, qui est placé dans le tableau, la sélection de l'année va être transmis à une autre page en tant que paramètre.

Maintenant, comment puis-je activer mon année de colonne dans une liste déroulante?

        rulesTableGlobal = $('#rulesTable').dataTable( {
            //"bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "aoColumns": [
                 { "sTitle": "Id", "sWidth" : "20px" },
                 { "sTitle": "Property ID" , "sWidth"  : "20px"},
                 { "sTitle": "Adress" , "sWidth"  : "130px"},
                 { "sTitle": "Suburb" , "sWidth"  : "50px"},
                 { "sTitle": "Bond", "sWidth"  : "25px" },
                 { "sTitle": "Year", "sWidth"  : "25px" , "aType": "dom-select"},
                 { "sTitle": "View or Modify" , "sWidth"  : "50px"}]

        });

    function addPropertyToTable( lt_id, lt_uid, address, suburb_name, min_guests, max_guests,
                                 bondFee,cleaningFee,bookingServiceFee, weekly_rate,nightly_rate){

        var _lt_id = "\'" + lt_id + "\'";
        var viewLink    = '<A href="#" onclick="forwardDetails('+_lt_id+');">View and Modify</A>';          
        var year= "";

        $('#rulesTable').dataTable().fnAddData( [
                                 lt_id, lt_uid, address, suburb_name, bondFee,cleaningFee,bookingServiceFee,  weekly_rate,nightly_rate, min_guests, max_guests, year, viewLink ] );


    }

        });

    }

OriginalL'auteur user403295 | 2010-12-23

  1. 3

    C'est la solution que j'ai utilisé pour vous les gars qui ont connu le même problème. Crée des zones de liste modifiables et ajoute à la colonne 12..Salutations.. Ozlem.

            function init(){

            //http://stackoverflow.com/questions/2759837/adding-dropdown-list-to-the-particular-column-using-jquery

            var ind = 0;
            var year    = 2010;
            //var options = getYears(year, 3);
            $.each($('#rulesTable td:nth-child(12)'), function () {

                //creates a combobox
                var select  = document.createElement('select');
                select.setAttribute('class','year');
                select.setAttribute('name',ind+''); 
                select.setAttribute('id','comboYear'+ind); 
                select.innerHTML = '<option value=2010>2010</option><option value=2011>2011</option><option value=2012>2012</option>'; 

                /*for (var i= 0 ; i<options.length; i++){
                    var nextOption = options[i];                        
                    select.appendChild(nextOption);
                }*/
                $(this).append(select);
                $('#comboYear'+ind).change(function () {

                    var comboId = $(this).attr('id');
                    var comboIndex = $(this).attr('name');
                    var yearSelected = $('#'+comboId+' option:selected').text();
                    var propertyId = rulesTableGlobal.fnGetData()[comboIndex][0];
                    //alert(text);
                    upDateRow(propertyId, yearSelected, comboIndex );

                });

                year = year+1;
                ind++;                  

            });

        }

    OriginalL'auteur user403295

  2. 1

    Définir votre zone de liste modifiable dans votre code HTML comme ceci:

    <select id="year">
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
</select>

    Chaque fois que vous avez besoin de la réelle valeur sélectionnée de la zone de liste déroulante, vous pouvez appeler

    $("#year").val()

    C'est une bonne pratique de ne pas répéter jQuery DOM recherches, de sorte que vous pouvez le faire comme ceci:

    //Define this on document ready
var selectYear = $("#year");

//Use this syntax to get the current value
selectYear.val()

    Je ne vois pas à partir de votre exemple de code où vous pourrez (peut-être dans la ligne de var year = "";, si le changement que pour var year = selectYear.val();), mais j'espère que cela va vous aider sur votre chemin. Si non, n'hésitez pas à demander plus d'informations dans les commentaires.

    EDIT: comme l'a demandé un échantillon pour afficher l'année select dans une table normale.

    <table>
    <tr>
        <td>a cell</td>
        <td>
            <select id="year">
                <option value="2010">2010</option>
                <option value="2011">2011</option>
                <option value="2012">2012</option>
            </select>
        </td>
    </tr>
</table>
    Même si, je n'ai pas encore expliqué correctement, vous obtenu ce que je veux dire. Je sais comment créer un tableau html et ajouter quoi que ce soit à l'intérieur. Pour ce cas, le code html, il y a seulement un div + nom de la table.J'ai tout créer dans le code javascript, lors du chargement du fichier. C'est là où je ne suis pas très bon.Et, j'ai obtenu ce que vous avez dit et j'ai essayé qqch de similaire. Mais comme vous le voyez,c'est une API de table. Je ne suis donc pas tout à fait sûr de savoir comment je vais placer que html. J'ai créé la chaîne html mais je ne sais pas comment je vais l'intégrer dans la colonne de la table. Pouvez-vous me donner un peu plus claire de l'échantillon.Merci beaucoup.Ozlem.
    Pouvez-vous me donner un exemple de code pour montrer comment intégrer année dans un tableau normal. Je veux dire tout ce que vous m'avez donné dans votre poste, vous pouvez le placer dans un tableau exemple dans le javascript côté.alors je pourrais comprendre:) Si vous voulez voir le code entier, je vais juste poster.Merci une fois de plus...ce qui Concerne. Ozlem.
    Dans un tableau normal, vous serait simple de faire la partie html de la table. Je vais ajouter ça à ma réponse.

    OriginalL'auteur dyve

  3. 0

    utilisation fnRender-

    $('#example').dataTable( {
    aoColumns : [ {
        fnRender : function(oObj) {
            return '<select id="year">' + '<option value="2010">2010</option>' + '<option value="2011">2011</option>' + '<option value="2012">2012</option>' + '</select> ';
        }
    } ]
});
    Ces jours, vous devriez utiliser mRender depuis fnRender est deprecated pour un certain temps. Lire plus d'informations à propos de mRender

    OriginalL'auteur digitebs