CODEWITHSUNDEEP
jquerydatatables
pise
pise

Reputation: 865

Select All rows in Jquery Datatables

I have a datatables in which I can select multiple row onclick but how can I select all the row on a click of button and at the same time all rows are highlighted with selection (Can you please give example of selection for current page and all the pages). I have written a code to get multiple selected value.

Checkbox will also do but then how to get selected value.

Below is code for single and multiple selection.

 var oTable = $("#example").dataTable();

    $('#example tbody').on('click', 'tr', function() {
                        $(this).toggleClass('selected');

    });

Code to get selected value on button submit.

var row = oTable.rows('.selected').data();

var jsonArr = "[";

        if(row != null && row.length){

            for (var i = 0; i < row.length; i++) {
                var row1 = row[i]; // this will give me one row details
                        // row1[0] will give me column details
                        jsonArr = jsonArr + "{\"ID\":" + row1[0] + "},";

                }   
             jsonArr = jsonArr + "]";

Upvotes: 4

Views: 26676

Answers (3)

Ruwantha
Ruwantha

Reputation: 2653

According to the doc there is a inbuilt function for this. No need extra coding, 

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'T<"clear">lfrtip',
        tableTools: {
            "sRowSelect": "multi",
            "aButtons": [ "select_all", "select_none" ]
        }
    } );
} );

You will need the JS file defined at the doc and aprt from that they have missed to included the following related CSS file

This is all it takes.

Upvotes: 0

pise
pise

Reputation: 865

Thank You for your help. But some how I did my select all manually the only loop hole in this is, if I select header check box all the row check box will be selected but when we go on next page eg: page no 2 header check box will be checked and again to select all page no 2 rows check box I have to uncheck and check header checkbox.

What I did:

I have added input type checbox thead tr and tbody tr and gave class ='case' to all child input. On click of select all calling a function to select/deselect child rows

<thead>
     <tr>
       <th><input type='checkbox' id='selectall'/></th>
       <th>Patient Name</th>
     </tr>
</thead>

<tbody>
 <tr>
    <td class style='text-align: center;'><input type='checkbox' class='case' name='case'id = '"item.uid+"_I' /></td>
    <td>"+item.name+"</td>
  <tr>
</tbody>


// function to select/deselect all input checkbox

to check uncheck all input box
$('#selectall').click(function(event) {  //on click

    if(this.checked) { // check select status
          $('.case').each(function() { //loop through each checkbox
          this.checked = true;  //select all checkboxes with class "checkbox"   
          $(this).closest("tr").addClass("selected");              
     });
     }else{
           $('.case').each(function() { //loop through each checkbox
           this.checked = false; //deselect all checkboxes with class "checkbox"
           $(this).closest("tr").removeClass("selected");
     });        
    }
});


// select/deselect function if single row is selected
$('#patientdata tbody').on('click', 'tr', function() {
    var rowID = this.id;
    if ( $(this).hasClass('selected') ) {
      $(this).removeClass('selected');
        $('#'+rowID+"_I").attr('checked', false);
        }
        else {
              $(this).addClass('selected');
               $('#'+rowID+"_I").attr('checked', true);
            }
        });

Thanks

Upvotes: -1

Yuri
Yuri

Reputation: 66

What will probably help you is TableTools extension. There is an example with select_all and select_none buttons, and those work for all pages.

One default limitation is that select_all will ignore current filtering, but that is easy to solve using the code below. Providing "true" argument to fnSelectAll enables the filter-aware selection.

tableTools: {
    sRowSelect: 'multi',
    aButtons: [
        {
            sExtends: 'select_all',
            sButtonText: 'Select All',
            fnClick: function (nButton, oConfig, oFlash) {
                TableTools.fnGetInstance('example').fnSelectAll(true);
            }
        }
    ]
}

Upvotes: 5

Related Questions