Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
​
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.11.4/date-1.1.1/r-2.2.9/sl-1.3.4/datatables.min.css">
<link rel="stylesheet" type="text/css" href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css">
​
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.11.4/date-1.1.1/r-2.2.9/sl-1.3.4/datatables.min.js"></script>
<script type="text/javascript" src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
​
​
  </head>
​
        <body scroll="no" style="overflow: hidden">
​
            <div class="container ">
​
                        <!--button type="button" onclick="columnsCount()">Total Column Count </button-->
​
                <table id="myTable"  class=" table-default   cell-border nowrap  hover blue" style= "width:100%" >
​
                        <script> $(document).ready( function () {
​
​
var table = 
                        $('#myTable').DataTable ({
​
// options here
​
                                    columnDefs: [{
targets:2,
title:'PrimaryKey',
defaultContent:'',
data:'fieldData.PrimaryKey',
type:'string',
searchable:true,
visible:false,
orderable:true,
},
{
targets:7,
title:'City',
defaultContent:'',
data:'fieldData.City',
type:'string',
searchable:true,
visible:true,
orderable:true,
},
{
targets:6,
title:'Company',
defaultContent:'',
data:'fieldData.Company',
type:'string',
searchable:true,
visible:true,
orderable:true,
},
{
targets:8,
defaultContent:'',
data:'fieldData.Country_Code',
type:'string',
searchable:true,
visible:true,
orderable:true,
},
{
targets:9,
title:'Date',
defaultContent:'',
data:'fieldData.Date',
type:'date',
searchable:true,
visible:true,
orderable:true,
},
{
targets:11,
title:'Email',
defaultContent:'',
data:'fieldData.Email',
type:'string',
searchable:true,
visible:true,
orderable:true,
},
{
targets:3,
title:'First_name',
defaultContent:'',
data:'fieldData.First_name',
type:'string',
searchable:true,
visible:true,
orderable:true,
},
{
targets:5,
title:'Gender',
defaultContent:'',
data:'fieldData.Gender',
type:'string',
searchable:true,
visible:true,
orderable:true,
},
{
targets:1,
title:'id',
defaultContent:'',
data:'fieldData.id',
order:'asc',
type:'num',
searchable:true,
visible:true,
orderable:true,
},
{
targets:4,
title:'Last_name',
defaultContent:'',
data:'fieldData.Last_name',
type:'string',
searchable:true,
visible:true,
orderable:true,
},
{
targets:12,
title:'Picture',
defaultContent:'',
data:'fieldData.Picture',
type:'container',
searchable:true,
visible:true,
orderable:true,
},
{
targets:10,
title:'Salary',
defaultContent:'',
data:'fieldData.Salary',
type:'num',
searchable:true,
visible:true,
orderable:true,
},
{
targets:0,
defaultContent:'',
data:null,
searchable:true,
visible:true,
orderable:true,
checkboxes: true,
}],
​
                                    data:[{"fieldData":{"Company":"Meeveo","Date":"17/7/2021","Email":"kgorghetto0@simplemachines.org","First_name":"Kathy","Gender":"Female","IBAN":"TN50 2067 9016 6095 7926 2525","Last_name":"Gorghetto","Picture":"1c8d4d8f28c5fef1497f72eaf4529f75.jpg","PrimaryKey":"B96530EB-CB05-4F9F-9654-9362AD2A6810","Salary":85000,"Street_Name":"Mendota","id":1},"modId":"23","portalData":{},"recordId":"1"},{"fieldData":{"Company":"JumpXS","Date":"27/6/2021","Email":"cconyers1@cam.ac.uk","First_name":"Carey","Gender":"Female","IBAN":"GE98 TA57 1804 2962 1402 20","Last_name":"Conyers","Picture":"2b65c2db4f42998842de177cf79a49be.jpg","PrimaryKey":"2B6CA6A8-9431-49A9-960B-46BB3B25378E","Salary":56300,"Street_Name":"Gale","id":2},"modId":"15","portalData":{},"recordId":"2"},{"fieldData":{"Company":"JumpXS","Date":"08/27/2021","Email":"cconyers1@cam.ac.uk","First_name":"Deborah","Gender":"Female","IBAN":"GE98 TA57 1804 2962 1402 20","Last_name":"Philipps","Picture":"istockphoto-614115754-170667a.jpg","PrimaryKey":"8B393646-F7EF-4200-B496-99D4A3C69D57","Salary":65300,"Street_Name":"Gale","id":2},"modId":"16","portalData":{},"recordId":"1012"},{"fieldData":{"Company":"Linktype","Date":"22/12/2021","Email":"agirardi2@csmonitor.com","First_name":"Alvan","Gender":"Female","IBAN":"GB67 NMBP 3445 0180 9095 07","Last_name":"Girardi","Picture":"4ce7ed351cc29fceb61ea1a34415e8eb.jpg","PrimaryKey":"4E7271F4-F83E-4ACD-A607-AAFD438D784A","Salary":82600,"Street_Name":"Dovetail","id":3},"modId":"11","portalData":{},"recordId":"3"},{"fieldData":{"Company":"Photojam","Date":"03/10/2021","Email":"kungerecht3@skype.com","First_name":"Korie","Gender":"Female","IBAN":"AD02 5578 9635 NZY0 JQCP YBNX","Last_name":"Ungerecht","Picture":"5c09c4dc82dc441dfb26975fe8dc1634.jpg","PrimaryKey":"1B00C6CE-583C-41B8-B7FC-86019D8E2B3D","Salary":114200,"Street_Name":"Summit","id":4},"modId":"12","portalData":{},"recordId":"4"},{"fieldData":{"Company":"Photobug","Date":"01/03/2021","Email":"dquoit4@umich.edu","First_name":"Delmar","Gender":"Female","IBAN":"FR61 8321 0672 14FS 7FDF TSVL R08","Last_name":"Quoit","Picture":"7c5c703071b2b6d2db66dc28c2ff6d49--model-face-character-inspiration.jpg","PrimaryKey":"59EA614F-ADB5-4CE9-98F6-AC3BB43EC993","Salary":27300,"Street_Name":"American","id":5},"modId":"11","portalData":{},"recordId":"5"},{"fieldData":{"Company":"Vinder","Date":"10/01/2021","Email":"gsterzaker5@dailymotion.com","First_name":"Gerhardine","Gender":"Female","IBAN":"KZ67 343T ZPOD OFFK TJDT","Last_name":"Sterzaker","Picture":"7cbcf6d4a8fe05640f366e19b02309ad.jpg","PrimaryKey":"7C2136DE-62CA-419D-B7C8-070B6C0E8E3C","Salary":75700,"Street_Name":"Hooker","id":6},"modId":"10","portalData":{},"recordId":"6"},{"fieldData":{"Company":"Brainbox","Date":"14/11/2021","Email":"ehaney6@simplemachines.org","First_name":"Eveleen","Gender":"Female","IBAN":"FR04 3704 9110 730D VW1P TEVF E95","Last_name":"Haney","Picture":"7cd43556928df873b82dfd09a2b1a49b.jpg","PrimaryKey":"1DB1D50E-65F4-4E38-B9BD-98D64A431E4E","Salary":78300,"Street_Name":"Merry","id":7},"modId":"11","portalData":{},"recordId":"7"},{"fieldData":{"Company":"Cogilith","Date":"04/02/2021","Email":"atarplee7@opensource.org","First_name":"Alberta","Gender":"Female","IBAN":"DO94 BDIO 6015 1401 1951 1721 6279","Last_name":"Tarplee","Picture":"8df8ead3ab6fd669.jpg","PrimaryKey":"790133B8-6B34-40AE-8C76-C7F435C19313","Salary":74000,"Street_Name":"Derek","id":8},"modId":"10","portalData":{},"recordId":"8"},{"fieldData":{"Company":"Jayo","Date":"26/4/2021","Email":"epickhaver8@last.fm","First_name":"Elsy","Gender":"Female","IBAN":"LB08 4998 3CG9 OURY L8NT WBBS 88LS","Last_name":"Pickhaver","Picture":"8e735b379da8fd92cc7b7e9e482d3015.jpg","PrimaryKey":"B3421D81-D8E6-4790-ACF8-274022EB2253","Salary":34300,"Street_Name":"Green","id":9},"modId":"11","portalData":{},"recordId":"9"}],   
    
order: [[4,'asc']],
​
scrollX:false,
scrollY:'45vh',
info:true,
paging:false,
lengthMenu:[ [10, 25, 50, -1], [10, 25, 50, "All"] ],
lengthChange:true,
scrollCollapse:true,
searching:true,
fixedHeader:{header:true,
footer:true},
fixedColumns:true,
colReorder:false,
responsive:false,
rowReorder:false,
select:false,
​
​
                        
 
​
​
         createdRow: function( row, data, dataIndex ) {
             if ( data[6] == 'PHP' ) {        
         $(row).addClass('table-danger');
     
       }},
​
});
​
                        
​
 
//      var mTable = $('#myTable').DataTable();
//      var clonedTr =  $(mTable.table().header()).find("tr").clone();  
//      $(mTable.table().footer()).empty().append(clonedTr);
​
​
​
}); </script>
​
                    <thead class="table-light"></thead>
​
                    <tfoot   class="table-light"><tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr></tfoot>
​
                    <tfoot><tr></tr></tfoot>
​
​
                </table>
                    </div>
​
            <!-- Script to Count Number of Columns in a Table Row-->
            <script>
​
                function columnsCount() {
                    // To Count all the columns in the table
                    // and get the count of the selected elements
                    var colCount = document.getElementById("myTable").rows[0].cells.length;
                    alert("Total Number of Columns in a Table: " + colCount);
                };
​
        </script>
    </body>
</html>
​
​
​
 
​
Output

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

Dismiss x
public
Bin info
philippelouispro
0viewers