DataTables

DataTables Examples

by Robert Byron

HTML

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <table cellpadding="0" cellspacing="0" border="0" class="dataTable table table-striped" id="example">

        <thead>
            <tr>
                <th rowspan="3">Subclaim Result</th>
                <th colspan="15" class="dt-head-center">ELA Tests</th>
                <th colspan="12" class="dt-head-center" style="border-left:2px solid black">Math Tests</th>
            </tr>
        <tr style="">
            <th colspan="3" style="border-left:2px solid black;" title="Literary Text">Literary Text (RL)</th>
            <th colspan="3" title="Informational Text">Informational Text (RI)</th>
            <th colspan="3" title="Vocabulary">Vocabulary (RV)</th>
            <th colspan="3" style="border-left:2px solid black" title="Writing Expression">Writing Expression (WE)</th>
            <th colspan="3" title="Knowledge and use of Language Conventions">Knowledge and use of Language Conventions (WKL)</th>
            <th colspan="3" style="border-left:2px solid black" title="Major content">Major Content (MC)</th>
            <th colspan="3" title="Expressing Mathematical Reasoning">Expressing Mathematical Reasoning (EMR)</th>
            <th colspan="3" title="Modeling & Application">Modeling & Application (MA)</th>
            <th colspan="3" title="Additional & Supporting Content">Additional & Supporting Content (ASC)</th>
        </tr>
        <tr>
            <th  style="border-left:2px solid black">Percent</th>
            <th>Count</th>
            <th>Students</th>
            <th>Percent</th>
            <th>Count</th>
            <th>Students</th>
         ...

CSS

table.dataTable tbody>tr.selected,
table.dataTable tbody>tr>.selected {
  background-color: #A2D3F6;
}

JavaScript

$(document).ready(function() {

  var dataSet = [
	{
		ASCCount:11,
		ASCPercent:61.11,
		ASCTotal:18,
		EMRCount:10,
		EMRPercent:55.56,
		EMRTotal:18,
		MACount:7,
		MAPercent:38.89,
		MATotal:18,
		MCCount:10,
		MCPercent:55.56,
		MCTotal:18,
		RICount:8,
		RIPercent:44.44,
		RITotal:18,
		RLCount:5,
		RLPercent:27.78,
		RLTotal:18,
		RVCount:7,
		RVPercent:38.89,
		RVTotal:18,
		SubClaimOutcome:1,
		WECount:7,
		WEPercent:38.89,
		WETotal:18,
		WKLCount:7,
		WKLPercent:38.89,
		WKLTotal:18,
	},
	{
		ASCCount:5,
		ASCPercent:27.78,
		ASCTotal:18,
		EMRCount:4,
		EMRPercent:22.22,
		EMRTotal:18,
		MACount:4,
		MAPercent:22.22,
		MATotal:18,
		MCCount:4,
		MCPercent:22.22,
		MCTotal:18,
		RICount:6,
		RIPercent:33.33,
		RITotal:18,
		RLCount:6,
		RLPercent:33.33,
		RLTotal:18,
		RVCount:8,
		RVPercent:44.44,
		RVTotal:18,
		SubClaimOutcome:2,
		WECount:2,
		WEPercent:11.11,
		WETotal:18,
		WKLCount:5,
		WKLPercent:27.78,
		WKLTotal:18
	},
	{
		ASCCount:2,
		ASCPercent:11.11,
		ASCTotal:18,
		EMRCount:4,
		EMRPercent:22.22,
		EMRTotal:18,
		MACount:7,
		MAPercent:38.89,
		MATotal:18,
		MCCount:4,
		MCPercent:22.22,
		MCTotal:18,
		RICount:4,
		RIPercent:22.22,
		RITotal:18,
		RLCount:7,
		RLPercent:38.89,
		RLTotal:18,
		RVCount:3,
		RVPercent:16.67,
		RVTotal:18,
		SubClaimOutcome:3,
		WECount:9,
		WEPercent:50,
		WETotal:18,
		WKLCount:6,
		WKLPercent:33.33,
		WKLTotal:18	
	}
];

  var columnDefs = [{
    title: "Name"
  }, {
    title: "Position"
  }, {
    title: "Office"
  }, {
    title: "Extn."
  }, {
    title: "Start date"
  }, {
    title: "Salary"
  }];

  var myTable;

  myTable = $('#example').DataTable({
    "sPaginationType": "full_numbers",
    data: dataSet,
        "destroy": true,
        "processing": false,
        "serverSide": false,
        "responsive": false,
        "scrollY": "300px",
        "scrollX": true,
        "scrollCollapse": true,
        "info": false,
        "autoWidth": true,
        "ordering": false,
        "paging":...