add select2 in all cells of a given column : how can I initialize them ?

add select2 in all cells of a given column : how can I initialize them ?

trucmuche2005trucmuche2005 Posts: 71Questions: 22Answers: 2
edited August 2016 in Free community support

Hello,

I use the render() function with pleasure to add a form in each cell of the 2d column of my datatable. It works perfectly. But now, I would like to add also a select2 component but I cannot initialize it.

I tried to call $(".select2").select2(); after the $("#myTable").Datatable(...) initialization, with no success.
I tried to use the "initComplete" parameter of Datatable() like this :
"initComplete": function(settings, json) {
$(".select2").select2();
}
but it does not work neither.

The select2 components has the following HTML code :
<select class="form-control select2" multiple="multiple" data-placeholder="txt">
<option>...</option>
<option>...</option>
<option>...</option>
</select>

How can I initialize all the select2 fields which have been added to the cell content using the render function ?

Many thanks for your help !

T.

Answers

  • allanallan Posts: 63,352Questions: 1Answers: 10,443 Site admin

    That looks like it should work to me. Can you link to a page showing the issue please.

    Allan

  • trucmuche2005trucmuche2005 Posts: 71Questions: 22Answers: 2

    I think that the problem could be linked to CSS selector. I tried to change $(".select2").select2(); to $('.select2').addClass('red'); but it does not work. But $('#myTable tbody').addClass('red'); works perfectly, adding the 'red' style to all cells.

    I tried many times to get the correct selector to access all .select2 objects in myTable, without any luck. How can I determine the correct selector to use ?

  • allanallan Posts: 63,352Questions: 1Answers: 10,443 Site admin

    Try:

    $( 'select.select2', table.rows().nodes() ).select2();
    

    However, as I say, I would really need a test case to know for sure.

    Allan

  • trucmuche2005trucmuche2005 Posts: 71Questions: 22Answers: 2

    It does not work... I can send you the url but it's a login protected website. Can I send you the login & pwd information using PM ?

  • allanallan Posts: 63,352Questions: 1Answers: 10,443 Site admin

    Please do - click my name above and then "Send message".

    Allan

  • allanallan Posts: 63,352Questions: 1Answers: 10,443 Site admin

    Actually - I've just seen your message. I'll get back to you shortly.

  • allanallan Posts: 63,352Questions: 1Answers: 10,443 Site admin

    The problem is that you aren't using DataTables' own ajax options to load the data into the table, but rather your own $.ajax call with row.add(). You need to initialise select2 after you have added the rows. At the moment the select2 initialisation is happening before the data has been loaded into the table, thus it is finding nothing.

    Allan

  • trucmuche2005trucmuche2005 Posts: 71Questions: 22Answers: 2

    Thank you... I tried to switch to ajax loading inside Datatables, but there is something that I do wrong...

    I have this in HTML :

      <table id="tableDONNEES" >
                    <thead>
                    <tr>
                      <th>id</th>
                      <th>col1</th>
                      <th>col2</th>
                      <th>col3</th>
                      <th></th>
                      </tr>
                    </thead>
                    <tbody>
    
                    </tbody>
                    <tfoot>
                    <tr>
                     <th>id</th>
                      <th>col1</th>
                      <th>col2</th>
                      <th>col3</th>
                      <th></th>
                    </tr>
                    </tfoot>
                  </table>
    

    I have in JS > $(document).ready(function() { ... this :

    var tableDONNEES = $("#tableDONNEES").DataTable( {
            "serverSide": true,
            "ajax": {
                "url": "scripts/myscript.php",
                "type": "GET",
                "data": function ( d ) {
                    d.operation = "list";
                }
              },
            "columns": [{ name:"id", "data":"id" },
                        {name:"name1", "data":"codepostal"},
                        {name:"name2", "data":"ville"}, 
                        {name:"name3", "data":"pays"}, 
                        {name:"name4", "orderable": false, "data": "null"}]
        } );
    

    myscript.php contains :

    if ($operation=="lister"){      
        $db=dbconnect();
        
        $query = "SELECT id,codepostal,ville, pays  FROM db_villes WHERE 1;";
                    
        $result=mysqli_query($db, $query);
        
        $dataArray = array();
        while($array = mysqli_fetch_assoc($result)){
            $dataArray[] = $array;
        } 
        
        echo json_encode($dataArray);
    }
    

    and it outputs this (got from Safari > Resources > XHR) :

    [{"id":"1","codepostal":"4000","ville":"ville1","pays":"France"},{"id":"2","codepostal":"4020","ville":"ville2","pays":"France"},{"id":"3","codepostal":"4020","ville":"ville3","pays":"France"},{"id":"4","codepostal":"4031","ville":"ville3","pays":"France"}
    }]
    

    When I load the page, nothing is shown in the DataTable (no entry) and I get the following error : TypeError: undefined is not an object (evaluating 'c.length') in jquery.dataTables.min.js:36:421.

    I don't understand. Could you help me please ?

    Many thanks again...

  • allanallan Posts: 63,352Questions: 1Answers: 10,443 Site admin

    You have enabled the serverSide option, but your server-side script doesn't fully implement server-side processing.

    Do you need server-side processing?

    Allan

  • trucmuche2005trucmuche2005 Posts: 71Questions: 22Answers: 2

    Ok !! I modified the script to create json result and deleted serverSide option. Now it works and It's much pretty than my previous code... Thanks thanks !!! :-)

This discussion has been closed.