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

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

priyankaTpriyankaT Posts: 3Questions: 1Answers: 0
edited July 2017 in Free community support
"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)'
                                                                
                                                    }

Answers

  • kthorngrenkthorngren Posts: 5,544Questions: 19Answers: 1,233

    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

  • gyrocodegyrocode Posts: 112Questions: 5Answers: 29

    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.

  • priyankaTpriyankaT Posts: 3Questions: 1Answers: 0

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

  • gyrocodegyrocode Posts: 112Questions: 5Answers: 29

    @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.

  • kthorngrenkthorngren Posts: 5,544Questions: 19Answers: 1,233
    edited July 2017

    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

  • priyankaTpriyankaT Posts: 3Questions: 1Answers: 0

    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??

  • tangerinetangerine Posts: 2,296Questions: 18Answers: 255

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

  • rafaelspfonsecarafaelspfonseca Posts: 3Questions: 0Answers: 0

    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++;
    
      }
    
     }
    
  • rafaelspfonsecarafaelspfonseca Posts: 3Questions: 0Answers: 0

    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>
    
    
    
  • rafaelspfonsecarafaelspfonseca Posts: 3Questions: 0Answers: 0
Sign In or Register to comment.