File
Add library
Share
Login or Register
Help
HTML
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
    <meta charset=utf-8 />
<!--
Created using JS Bin
http://live.datatables.net
​
Copyright (c) 2021 by anonymous (http://live.datatables.net/moveguqo/1/edit)
​
Released under the MIT license: http://jsbin.mit-license.org
-->
    <title>DataTables - JS Bin</title>
  
<style id="jsbin-css">
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
</style>
</head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>No</th>
            <th>Select</th>
            <th>Passport No</th>
            <th>Worker Name</th>
            <th>Gender</th>
            <th>Nationality</th>
          </tr>
        </thead>
​
        <tbody>
          <tr>
            <td></td>
            <td></td>
            <td>AC1234567</td>
            <td>Edinburgh</td>
            <td>FEMALE</td>
            <td>MALAYSIA</td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td>AC1234567</td>
            <td>Edinburgh</td>
            <td>FEMALE</td>
            <td>MALAYSIA</td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td>AC1234567</td>
            <td>Edinburgh</td>
            <td>FEMALE</td>
            <td>MALAYSIA</td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td>AC1234567</td>
            <td>Edinburgh</td>
            <td>FEMALE</td>
            <td>MALAYSIA</td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td>AC1234567</td>
            <td>Edinburgh</td>
            <td>FEMALE</td>
            <td>MALAYSIA</td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td>AC1234567</td>
            <td>Edinburgh</td>
            <td>FEMALE</td>
            <td>MALAYSIA</td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td>AC1234567</td>
            <td>Edinburgh</td>
            <td>FEMALE</td>
            <td>MALAYSIA</td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td>AC1234567</td>
            <td>Edinburgh</td>
            <td>FEMALE</td>
            <td>MALAYSIA</td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td>AC1234567</td>
            <td>Edinburgh</td>
            <td>FEMALE</td>
            <td>MALAYSIA</td>
          </tr>
        </tbody>
      </table>
    </div>
  <script>
$(document).ready( function () {
  if($('#example').length > 0) {    
        console.log("Select Worker List DataTable");
        var oTableSelectWorker = $('#example').DataTable({
            "dom": '<"top"i>tr<"bottom"p><"clear">', 
            "processing": true,
              "serverSide": true,
              "responsive": true,
              "destroy" : true,
              'lengthChange': false,
              "language": {
                "processing": "<img style='width:20px; height:20px;' src='" + contextPath + "/images/loading.gif' />",
                "paginate": {"next": prop.dtbNext, "previous": prop.dtbPrevious },
                "info": prop.dtbShowingPage + " " + "_PAGE_" +" "+ "" + prop.dtbOf + " " + " _PAGES_",
                "infoEmpty": ""
            },
            "columnDefs": [
                  {"className": "dt-center", "targets": [1]},{"targets": "_all"}
                  ],
                "columns": [
                            { "data": null, "searchable" : false, "orderable" : false },
                            { "data": null, "searchable" : false, "orderable" : false, 
                                "render": function ( data, type, row ) {
                                    var check = '';
                                    selectedIds.forEach(function(item, index){
                                        console.log(data, item, index);
                                        if(data) {
                                            if(data.passportNo == item) {
                                                check = 'checked="checked"';
                                            }
                                        }
                                        
                                    });
                                    return '<input id="checkBoxId" type="checkbox" ' + check + ' class="checkbox check-success checkbox-circle"><span class="label-text"></span>';
                                }
                            },
                            { "data": "passportNo"},
                            { "data": "workerName"},
                            { "data": "genderDetails"},
                            { "data": "nationality"}
                          ],
                "fnDrawCallback": function ( oSettings ) {
                processRowNum(oSettings, true);
                portalUtil.showMainLoading(false);
              } ,
            });
    }
} );
</script>
</body>
</html>
CSS
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScript
 
        var oTableSelectWorker = $('#example').DataTable({
            "dom": '<"top"i>tr<"bottom"p><"clear">', 
            "processing": true,
              "serverSide": true,
              "responsive": true,
              "destroy" : true,
              'lengthChange': false,
              "language": {
                "processing": "<img style='width:20px; height:20px;' src='" + contextPath + "/images/loading.gif' />",
                "paginate": {"next": prop.dtbNext, "previous": prop.dtbPrevious },
                "info": prop.dtbShowingPage + " " + "_PAGE_" +" "+ "" + prop.dtbOf + " " + " _PAGES_",
                "infoEmpty": ""
            },
          "columnDefs": [
                  {"className": "dt-center", "targets": [1]},{"targets": "_all"}
                  ],
                "columns": [
                            { "data": null, "searchable" : false, "orderable" : false },
                            { "data": null, "searchable" : false, "orderable" : false, 
                                "render": function ( data, type, row ) {
                                    var check = '';
                                    selectedIds.forEach(function(item, index){
                                        console.log(data, item, index);
                                        if(data) {
                                            if(data.passportNo == item) {
                                                check = 'checked="checked"';
                                            }
                                        }
                                        
                                    });
                                    return '<input id="checkBoxId" type="checkbox" ' + check + ' class="checkbox check-success checkbox-circle"><span class="label-text"></span>';
                                }
                            },
                            { "data": "passportNo"},
                            { "data": "workerName"},
                            { "data": "genderDetails"},
                            { "data": "nationality"}
                          ],
                "fnDrawCallback": function ( oSettings ) {
                processRowNum(oSettings, true);
                portalUtil.showMainLoading(false);
              } ,
            });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers