Select all checkbox in DataTable of Jquery is not working in second time

priyankaT

"columnDefs": [
                                                                    {
                                                                                    
                ``                                                                  "targets": 0,
                                                                                    "data":null,
                                                                                    "defaultContent": "",
                                                                                     "checkboxes": {
                                                                                     "selectRow": true
                                                                                                    }
                                                                                 
                                                                     },
                                                                    
                                                                     {
                                                                             "targets": -1,
                                                                             "data": null,
                                                                            "defaultContent": "<i id=\"invoiceButton\" class=\"ion ion-information-circled\" data-toggle=\"modal\" data-target=\"#invoiceModal\" style=\" text-align: center; color: blue; font-size: 16px;\"></i>"
                                                                         },
                                                                        { "width": 50, "targets": 0 },
                                                                     
                                                                     
                                                 ],
                                            "select": {
                                                                "style": "multi" ,
                                                                selector: 'tr>td:nth-child(0), tr>td:nth-child(1)'
                                                                
                                                    }

kthorngren

It looks like you are creating the select checkbox in column 0 and using the Select extension on column 0. If you look at this example the last column is used for the checkbox and the Select option is disabled on the last column. I think you need to do the same but for column 0.

Kevin

gyrocode

I'm the author of jQuery DataTables Checkboxes extension.

You need to provide unique data for the column containing checkboxes, see Known Limitations.

Column containing checkboxes must have unique data. Using columns.data option set to null for the column containing checkboxes will result in unexpected behavior.

Also please remove defaultContent for column containing checkboxes, it's not needed.

---

See more articles about jQuery DataTables on gyrocode.com.

priyankaT

Hi gyrocode,Thanks.But I have a question,Why selectAll checkbox is working only once. 2nd time what happend in it?

gyrocode

@priyankaT, Without an example or real page, it's hard to say. Can you create an example on jsFiddle or share a link to your page?

---

See more articles about jQuery DataTables on gyrocode.com.

kthorngren

Interesting. I didn't notice that a plugin was being used, thought it was the Editor example. Tried the plugin with the above code and the Select extension and it works fine. As @gyrocode mentioned please provide an example with the issue.

Kevin

priyankaT

There is one senario,When I select all the data and move to 'Hold' page.If I click on hold page those records found in that.but I can't do Select all.Because it's iternally selected.How could do internally clear data when it move from 1st time??

tangerine

Can you create an example on jsFiddle or share a link to your page?

Rishabh Khanna

read this-https://datatables.net/forums/discussion/53281/1-2-6-css-select-datatables-css-not-displaying-select-all-checkbox/p1?new=1

rafaelspfonseca

FORM.PHP

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
    <title>DataTables example - Multiple table control elements</title>
    <link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="media/css/select.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="media/css/buttons.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="examples/resources/syntax/shCore.css">
    <link rel="stylesheet" type="text/css" href="examples/resources/demo.css">
    <style type="text/css" class="init">
    
    div.dataTables_length {
    padding-left: 2em;
    }
    div.dataTables_length,
    div.dataTables_filter {
        padding-top: 0.55em;
    }

    </style>
    <script type="text/javascript" language="javascript" src="media/js/jquery-1.12.4.js"></script>
    <script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
    <script type="text/javascript" language="javascript" src="media/js/dataTables.select.min.js"></script>
    <script type="text/javascript" language="javascript" src="media/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" language="javascript" src="examples/resources/syntax/shCore.js"></script>
    <script type="text/javascript" language="javascript" src="examples/resources/demo.js"></script>


<script type="text/javascript" language="javascript" class="init">


//atencao para o name do form
function selecionar_tudo(){
 for(i=0;i<document.cadastro.elements.length;i++)
  if(document.cadastro.elements[i].type == "checkbox")
   document.cadastro.elements[i].checked=1
}

//atencao para o name do form
function deselecionar_tudo(){
 for (i=0;i<document.cadastro.elements.length;i++)
  if(document.cadastro.elements[i].type == "checkbox")
   document.cadastro.elements[i].checked=0
}

    

$(document).ready(function() {
 var table = $('#example').DataTable( {
  dom: 'Bfrtip',
  language: {
   "url": "datatable/media/js/Portuguese-Brasil.json"
  },

  order: [[ 4, 'desc' ], [ 2, 'asc' ]],
  //"order": [[ 3, 'desc' ]],

  //"pageLength":25

  select: true,
  buttons: [
  {
   text: 'Select all',
   action: function () {
    table.rows().select();
    selecionar_tudo();
   }
  },
  {
   text: 'Select none',
   action: function () {
    table.rows().deselect();
    deselecionar_tudo();
   }
  }
  ]

 } );

} );




</script>

</head>

<!--//atencao para o name do form -->
<form name="cadastro" method="post">

<body class="dt-example">
    <div class="container">
        <section>

            <div class="demo-html"></div>
            <table id="example" class="display" cellspacing="0" width="100%">

                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>

                <tfoot>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>

                <tbody>
                    <tr>
                        <!--// os registros podem vir de um select do banco de dados, incrementando o $i a cada registro,
                        //o box_codigo será lido na pagina recebe_form para verificar quais registros foram marcados  -->
                        <td align='center'><a href='#'><input type='checkbox' name='box_codigo[$i]' value='$cod_registro'/>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>2011/04/25</td>
                        <td>$320,800</td>
                    </tr>
                    <tr>
                        <td align='center'><a href='#'><input type='checkbox' name='box_codigo[$i]' value='$cod_registro'/>
                        <td>Garrett Winters</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                        <td>63</td>
                        <td>2011/07/25</td>
                        <td>$170,750</td>
                    </tr>
                    <tr>
                        <td align='center'><a href='#'><input type='checkbox' name='box_codigo[$i]' value='$cod_registro'/>
                        <td>Ashton Cox</td>
                        <td>Junior Technical Author</td>
                        <td>San Francisco</td>
                        <td>66</td>
                        <td>2009/01/12</td>
                        <td>$86,000</td>
                    </tr>
                    <tr>
                        <td align='center'><a href='#'><input type='checkbox' name='box_codigo[$i]' value='$cod_registro'/>
                        <td>Cedric Kelly</td>
                        <td>Senior Javascript Developer</td>
                        <td>Edinburgh</td>
                        <td>22</td>
                        <td>2012/03/29</td>
                        <td>$433,060</td>
                    </tr>
                    <tr>
                        <td align='center'><a href='#'><input type='checkbox' name='box_codigo[$i]' value='$cod_registro'/>
                        <td>Airi Satou</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                        <td>33</td>
                        <td>2008/11/28</td>
                        <td>$162,700</td>
                    </tr>
                    <tr>
                        <td align='center'><a href='#'><input type='checkbox' name='box_codigo[$i]' value='$cod_registro'/>
                        <td>Brielle Williamson</td>
                        <td>Integration Specialist</td>
                        <td>New York</td>
                        <td>61</td>
                        <td>2012/12/02</td>
                        <td>$372,000</td>
                    </tr>
                    <tr>
                        <td align='center'><a href='#'><input type='checkbox' name='box_codigo[$i]' value='$cod_registro'/>
                        <td>Herrod Chandler</td>
                        <td>Sales Assistant</td>
                        <td>San Francisco</td>
                        <td>59</td>
                        <td>2012/08/06</td>
                        <td>$137,500</td>
                    </tr>
                    
                    <tr>
                        <td align='center'><a href='#'><input type='checkbox' name='box_codigo[$i]' value='$cod_registro'/>
                        <td>Ashton Cox</td>
                        <td>Junior Technical Author 2</td>
                        <td>San Francisco</td>
                        <td>66</td>
                        <td>2009/01/12</td>
                        <td>$86,000</td>
                    </tr>
                    <tr>
                        <td align='center'><a href='#'><input type='checkbox' name='box_codigo[$i]' value='$cod_registro'/>
                        <td>Cedric Kelly</td>
                        <td>Senior Javascript Developer 2</td>
                        <td>Edinburgh</td>
                        <td>22</td>
                        <td>2012/03/29</td>
                        <td>$433,060</td>
                    </tr>
                    <tr>
                        <td align='center'><a href='#'><input type='checkbox' name='box_codigo[$i]' value='$cod_registro'/>
                        <td>Airi Satou 2</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                        <td>33</td>
                        <td>2008/11/28</td>
                        <td>$162,700</td>
                    </tr>
                    <tr>
                        <td align='center'><a href='#'><input type='checkbox' name='box_codigo[$i]' value='$cod_registro'/>
                        <td>Brielle Williamson 2</td>
                        <td>Integration Specialist</td>
                        <td>New York</td>
                        <td>61</td>
                        <td>2012/12/02</td>
                        <td>$372,000</td>
                    </tr>
                    <tr>
                        <td align='center'><a href='#'><input type='checkbox' name='box_codigo[$i]' value='$cod_registro'/>
                        <td>Herrod Chandler 2</td>
                        <td>Sales Assistant</td>
                        <td>San Francisco</td>
                        <td>59</td>
                        <td>2012/08/06</td>
                        <td>$137,500</td>
                    </tr>

                </tbody>
            </table>
            

</body>
</html>

RECEBE_FORM.PHP

//se foi marcado algum registro
 if(isset($_POST["box_codigo"])){

  $a='0';
  foreach($_POST["box_codigo"] as $cod_reg){
   $cod_registro[$a] = $cod_reg;

   $a++;

  }

 }

rafaelspfonseca

LINKS PARA .CSS E .JS

**CSS**
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">
    


**JS**
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js"></script>

rafaelspfonseca

Veja example: https://jsfiddle.net/5jh9y1bn/2/