dataTables

by jlbriggs

HTML

<script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<script src="//cdn.datatables.net/colvis/1.1.0/js/dataTables.colVis.js"></script>
<script src="//cdn.datatables.net/colreorder/1.1.0/js/dataTables.colReorder.js"></script>

<div class="container">
			<table class="data-table" id="test-table">
						<thead>
				<tr>
				<th class='num'>Year</th>
<th class='num'>Natural gas</th>
<th class='num'>Coal</th>
<th class='num'>Oil</th>
<th class='num'>Total</th>
				</tr>
			</thead>
						<thead>
				<tr>
												<th>
								<input 
									type="text" 
									size="1" 
									class="filter" 
									data-index = "0"
									data-head="Year" 
								/>
							</th>
														<th>
								<input 
									type="text" 
									size="1" 
									class="filter" 
									data-index = "1"
									data-head="Natural gas" 
								/>
							</th>
														<th>
								<input 
									type="text" 
									size="1" 
									class="filter" 
									data-index = "2"
									data-head="Coal" 
								/>
							</th>
														<th>
								<input 
									type="text" 
									size="1" 
									class="filter" 
									data-index = "3"
									data-head="Oil" 
								/>
							</th>
														<th>
								<input 
									type="text" 
									size="1" 
									class="filter" 
									data-index = "4"
									data-head="Total" 
								/>
							</th>
											</tr>
			</thead>
						<tbody>
			<tr>
<td  class='num' >1950</td>
<td  class='num' >461.6</td>
<td  class='num' >1454</td>
<td  class='num' >848.6</td>
<td  class='num' >2764.2</td>
</tr>
<tr>
<td  class='num' >1951</td>
<td  class='num' >527.4</td>
<td  class='num' >1495.3</td>
<td  class='num' >966.5</td>
<td  class='num' >2989.2</td>
</tr>
<tr>
<td  class='num' >1952</td>
<td  class='num' >559.1</td>
<td  class='num' >1316.5</td>
<td  class='num' >984.6</td>
<td  class='num' >2860.2</td>
</tr>
<tr>
<td  class='num' >1953</td>
<td  class='num'...

CSS

table {
    width:95%!important;
}

JavaScript

var oTable;
var settings;
$(document).ready(function() 
{
	//########################################################
	//the table instantiation
	oTable = $('table#test-table').DataTable({
		orderClasses		: false,
		dom					: 'C<"clear">lfrtip',
		colVis			: { buttonText: 'Select Visible Columns', restore : true },
		paging			: true,
		pagingType 		: 'full_numbers',
		lengthChange	: true,
		lengthMenu		: [[10,15,25,50,100,-1],[10,15,25,50,100,"All"]],
		pageLength		: 15,
		searching		: true,
		stateSave 		: true,
		stateDuration	: 1209600,
		language		: { search: 'Search Table:' },
		initComplete  	: function(settings) 
    	{
    		//---------------------------------------------------------------------------
			//re-filter the table based on saved filters
			//console.log(settings);

			for ( var i=0 ; i < settings.aoPreSearchCols.length ; i++ ) 
			{
				//console.log(settings.aoPreSearchCols[i]);
                if(settings.aoPreSearchCols[i].sSearch.length > 0) 
	            {
	                //console.log('search '+ i +' : ' + settings.aoPreSearchCols[i].search);
					var dataHead = settings.aoColumns[i].sTitle;
					var dataValue = settings.aoPreSearchCols[i].sSearch;
					$('table#test-table thead input[data-head="'+ dataHead +'"]').val(dataValue);
                }
            }
			//---------------------------------------------------------------------------
		}
	});
    new $.fn.dataTable.ColReorder( oTable );
	settings = oTable.settings();
    console.log(settings);
	//########################################################
	
	
	//########################################################
	//table control buttons
	$('#test-table_wrapper.dataTables_wrapper').prepend($('#test-table-table-controls'));
	
	$('#dtReset').click(function() 
	{
		localStorage.removeItem('DataTables_test-table_'+window.location.pathname);
		location.reload();
	});
	$('#dtUnFilter').click(function() 
	{
		$('table#test-table thead input').each(function()...