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
  • …
 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.4/b-2.2.2/b-colvis-2.2.2/r-2.2.9/sb-1.3.0/sp-1.4.0/sl-1.3.4/datatables.min.css"/>
<table id="target-groups-table" class="table" style="border: 1px solid var(--dm-sidebar-bg-color); width: 100%;">
  <thead>
    <tr>
      <th></th>
      <th>NAME</th>
      <th>COUNT</th>
    </tr>
  </thead>
  <tbody>
​
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th>NAME</th>
      <th>COUNT</th>
    </tr>
  </tfoot>
</table>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.4/b-2.2.2/b-colvis-2.2.2/r-2.2.9/sb-1.3.0/sp-1.4.0/sl-1.3.4/datatables.min.js"></script>
 
table.dataTable th,
table.dataTable td {
  text-align: left;
}
 
$('#target-groups-table').DataTable({
        lengthMenu: [
            [10, 25, 50, 100, -1],
            [10, 25, 50, 100, "All"]
        ],
        responsive: true,
        dom: 'lpftrip',
        ajax: 'https://gistcdn.githack.com/foozzi/39e5fdc595131a3cc12fb895339e9fe7/raw/508a4d78c21d4e37a04a8c1ed336696de7e7efda/1.json',
        serverSide: true,
        fixedHeader: true,
        fixedColumns:   {
            left: 1,
            leftColumns:1
        },
        columns: [{
            data: 'id',
            render: function (id) {
                return '<input type="checkbox" class="dt-checkboxes" name="target" value="' + id + '" autocomplete="off">'
            }
        },
            {
                data: 'name',
                render: function (link) {
                    return '<span class="badge"><a style="text-decoration: none;" target="_blank" href="http://' + link + '">' + link + '</a></span>'
                }
            },
            {
                data: 'count'
            }
        ],
        'columnDefs': [{
            'targets': 0,
            'checkboxes': {
                'selectRow': true
            }
        }],
        "initComplete": function () {
​
        }
    })
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers