1
Answer

Check all visible rows in data table

Ayesha Fathima

Ayesha Fathima
7y
1k
1
I have Datatable i gave checkboxes to al rows,but i want to add "check all" functionality in table to the visible rows in table.Means if iam showing 10 records out of 100 recrds,i need to check those 10 records at a time in time.
I tried this script by searching in google,but it is not working properly.Can you please give anyother way
  1. <div class="panel-body">  
  2.                  <table id="Getmaildetailstable" class="table table-striped display" width="100%" >  
  3.                      <thead>  
  4.                         <tr>  
  5.                            <th><input name="select_all" value="1" id="Getmaildetailstable-select-all" type="checkbox" /></th>  
  6.                            <th>Starredflag</th>  
  7.                            <th>Importantflag</th>  
  8.                            <th>Mailid</th>  
  9.                            <th>Mailbox</th>  
  10.                            <th>LogicalID</th>  
  11.                            <th>Starred</th>  
  12.                            <th>Important</th>  
  13.                            <th>Subject</th>  
  14.                            <th>attachments</th>  
  15.                            <th>mailsize</th>  
  16.                            <th data-date-format="yyyymmdd">Created On</th>  
  17.                            <th data-date-format="yyyymmdd">Received On</th>  
  18.                            <th>Difference value</th>  
  19.                            <th>From</th>  
  20.                            <th>Due flag op</th>  
  21.                            <th>To</th>  
  22.                            <th>Read status</th>  
  23.                            <th>Incident_no</th>  
  24.                            <th>classification</th>  
  25.                            <th>Overdue</th>  
  26.                            <th>Attachments</th>  
  27.                         </tr>  
  28.                      </thead>  
  29.                   </table>  
  30.                </div>           
  31.                <script>  
  32.                getmailsdataObjects();  
  33.              Getmaildetailstable = $('#Getmaildetailstable').DataTable({  
  34.                  columns: [{  
  35.                      orderable: false,  
  36.                      className: 'select-checkbox',  
  37.                      defaultContent: "",  
  38.                      targets: 0,  
  39.                      visible: true,  
  40.                      'render': function (data, type, full, meta){  
  41.              return '<input type="checkbox" name="id[]" value="'   
  42.                 + $('<div/>').text(data).html() + '">';  
  43.          }  
  44.                  }, {  
  45.                      data: "STARRED_FLAG",  
  46.                      defaultContent: "",  
  47.                      targets: 1,  
  48.                      visible: false  
  49.                  },   
  50.                  {  
  51.                      data: "IMPORTANT_FLAG",  
  52.                      defaultContent: "",  
  53.                      targets: 2,  
  54.                      visible: false  
  55.                  }, {  
  56.                      data: "EMAIL_ID",  
  57.                      defaultContent: "",  
  58.                      targets: 3,  
  59.                      visible: false  
  60.                  }, {  
  61.                      data: "EMAILBOX",  
  62.                      defaultContent: "",  
  63.                      targets: 4,  
  64.                     visible: false  
  65.                  }, {  
  66.                      data: "LOGICAL_ID",  
  67.                      defaultContent: "",  
  68.                      targets: 5,  
  69.                     visible: false  
  70.                  }, {  
  71.                      data: "image",render: getStarredflag,  
  72.                      defaultContent: "",  
  73.                      targets: 6,  
  74.                     visible: true  
  75.                  },{  
  76.                      data:"image",render: getImportantflag,  
  77.                      defaultContent: "",  
  78.                      targets: 7,  
  79.                     visible: true  
  80.                  },{  
  81.                      data: "SUBJECT",  
  82.                      defaultContent: "",  
  83.                      targets: 8,  
  84.                     "render": function ( data, type, row ) {  
  85.                         return '<a href="javascript:void(0)" onclick="openmaildetailsfunction()">' + data + '</a>';  
  86.                       },  
  87.                      visible: true  
  88.                  },{  
  89.                      data: "attachments",  
  90.                      defaultContent: "",  
  91.                      targets: 9,  
  92.                     visible: false  
  93.                  },{  
  94.                      data: "MAIL_SIZE",  
  95.                      defaultContent: "",  
  96.                      targets: 10,  
  97.                     visible: false  
  98.                  },{  
  99.                      data: "CREATE_DATE",  
  100.                      defaultContent: "",  
  101.                      targets: 11,  
  102.                     visible: true  
  103.                  },{  
  104.                      data: "RECEIVE_DATE",  
  105.                      defaultContent: "",  
  106.                      targets: 12,  
  107.                     visible: false  
  108.                  },{  
  109.                      data: "flag",  
  110.                      defaultContent: "",  
  111.                      targets: 13,  
  112.                     visible: false  
  113.                  },{  
  114.                      data: "FROM_ADDRESS",  
  115.                      defaultContent: "",  
  116.                      targets: 14,  
  117.                     visible: true  
  118.                  },{  
  119.                      data: "flagday",  
  120.                      defaultContent: "",  
  121.                      targets: 15,  
  122.                     visible: false  
  123.                  },{  
  124.                      data: "TO_ADDRESS",  
  125.                      defaultContent: "",  
  126.                      targets: 16,  
  127.                     visible: true  
  128.                  },{  
  129.                      data: "READ_STATUS",  
  130.                      defaultContent: "",  
  131.                      targets: 17,  
  132.                     visible: false  
  133.                  },{  
  134.                      data: "INCIDENT_NO",  
  135.                      defaultContent: "",  
  136.                      targets: 18,  
  137.                     visible: false  
  138.                  },{  
  139.                      data: "CLASSIFICATION_TYPE",  
  140.                      defaultContent: "",  
  141.                      targets: 19,  
  142.                     visible: false  
  143.                  },{  
  144.                      data: "overdue",  
  145.                      defaultContent: "",  
  146.                      targets: 20,  
  147.                     visible: true  
  148.                  },{  
  149.                      data: "image",render: getImg,  
  150.                      defaultContent: "",  
  151.                      targets: 21,  
  152.                     visible: true  
  153.                  }],  
  154.                  select: {  
  155.                      style: 'multi',  
  156.                      selector: 'td:first-child'  
  157.                  },  
  158.            
  159.                  order: [  
  160.                      [2, 'asc']  
  161.                  ],  
  162.                  "searching": false,  
  163.                  "lengthChange": true  
  164.              });  
  165.          },  
  166.            
  167.              error: function(errorObj){  
  168.            
  169.                    console.log(errorObj);  
  170.                    $.notify("Error occurred in getting the Mailbox List. Please contact administrator.");  
  171.                  }  
  172.              });  
  173.              // Handle click on "Select all" control  
  174. $('#Getmaildetailstable-select-all').on('click', function(){  
  175.    // Get all rows with search applied  
  176.    var rows = Getmaildetailstable.rows({ 'search': 'applied' }).nodes();  
  177.    // Check/uncheck checkboxes for all rows in the table  
  178.    $('input[type="checkbox"]', rows).prop('checked', this.checked);  
  179. });  
  180.              </script>  
Answers (1)
Next Recommended Forum