My Information: datatable

Check all with datatables pagination

Here example of Check all with datatables pagination

<body>
<script
src="http://code.jquery.com/jquery-1.12.4.js"
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script type="application/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="application/javascript">
$(document).ready(function(e) {

var oTable = $('#seller_table').DataTable({"bSort":false, responsive: true});

   // var allPages = oTable.cells( ).nodes( ); // Remove comment if you want select all datatable value

    $('body').on("click","#selectAll",function () {
alert();
        if ($(this).hasClass('allChecked')) {
            $('#seller_table').find('input[type="checkbox"]').prop('checked', false);
//$(allPages).find('input[type="checkbox"]').prop('checked', false); // Remove comment if you want select all datatable value
        } else {
            $('#seller_table').find('input[type="checkbox"]').prop('checked', true);
//$(allPages).find('input[type="checkbox"]').prop('checked', true); // Remove comment if you want select all datatable value
        }
        $(this).toggleClass('allChecked');
    })

$("#delete_new_area").click(function(){
var check_all = [];
$(".new_area_value").each(function(index, element) {

if(this.checked){
check_all.push($(this).val());
}
        });

if(check_all.length>0){

// here your code for check value;
}
});

$('#seller_table').on('page.dt', function () {

     $('#selectAll').toggleClass('allChecked');
$('#seller_table').find('input[type="checkbox"]').prop('checked', false);
} );

});

</script>
<table id="seller_table" class="table responsive table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="seller_table_info">
<thead>
    <tr role="row">
      <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 130px;"> <button type="button" id="selectAll" class="main btn btn-primary "> <span class="sub"></span> Select </button></th>
      <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 280px;">Email</th>
      <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 608px;">Area</th>
    </tr>
</thead>
<tbody>
    <tr role="row" class="odd">
      <td><input class="new_area_value" value="4" type="checkbox"></td>
      <td>myinformation@gmail.com</td>
      <td>11416 NE 91ST ST </td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="5" type="checkbox"></td>
      <td>myinformation@gmail.com</td>
      <td>11416 NE 91ST ST </td>
    </tr>
    <tr role="row" class="odd">
      <td><input class="new_area_value" value="6" type="checkbox"></td>
      <td>myinformation@gmail.com</td>
      <td>11416 NE 91ST ST </td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="9" type="checkbox"></td>
      <td>myinformation@gmail.com</td>
      <td>Asheville%2C+NC%2C+United+States</td>
    </tr>
    <tr role="row" class="odd">
      <td><input class="new_area_value" value="10" type="checkbox"></td>
      <td>test@yopmail.com</td>
      <td>Ashburn, VA, United States</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="14" type="checkbox"></td>
      <td>-NA-</td>
      <td>Los Angeles, CA, United States</td>
    </tr>
    <tr role="row" class="odd">
      <td><input class="new_area_value" value="16" type="checkbox"></td>
      <td>-NA-</td>
      <td>Lower Parel, Mumbai, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="17" type="checkbox"></td>
      <td>myinformation@gmail.com</td>
      <td>Lower Parel, Mumbai, Maharashtra, India</td>
    </tr>
    <tr role="row" class="odd">
      <td><input class="new_area_value" value="20" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test Area, Yerawada, Pune, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="21" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test, Janta Road, Dattawadi, Pune, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="21" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test, Janta Road, Dattawadi, Pune, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="21" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test, Janta Road, Dattawadi, Pune, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="21" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test, Janta Road, Dattawadi, Pune, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="21" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test, Janta Road, Dattawadi, Pune, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="21" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test, Janta Road, Dattawadi, Pune, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="21" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test, Janta Road, Dattawadi, Pune, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="21" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test, Janta Road, Dattawadi, Pune, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="21" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test, Janta Road, Dattawadi, Pune, Maharashtra, India</td>
    </tr>
</tbody>
</table>
</body>

Pages

Friday 4 August 2017

Check all with datatables pagination

Check all with datatables pagination