DataTables

DataTables Examples

by B L Praveen

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/dangrossman/bootstrap-daterangepicker/master/daterangepicker-bs3.css">
<script src="https://raw.githubusercontent.com/dangrossman/bootstrap-daterangepicker/master/moment.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://raw.githubusercontent.com/dangrossman/bootstrap-daterangepicker/master/daterangepicker.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
        <div class="container">
            
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
    <thead>
        <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 4.0</td>
            <td>Win 95+</td>
            <td> 4</td>
            <td>X</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 5.0</td>
            <td>Win 95+</td>
            <td>5</td>
            <td>C</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 5.5</td>
            <td>Win 95+</td>
            <td>5.5</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 6</td>
            <td>Win 98+</td>
            <td>6</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet Explorer 7</td>
            <td>Win XP SP2+</td>
            <td>7</td>
            <td>A</td>
        </tr>
        <tr>
     ...

JavaScript

$.fn.dataTableExt.afnFiltering.push(
		function( oSettings, aData, iDataIndex ) {
			// "date-range" is the id for my input
			var dateRange = $(oSettings.nTable).closest('.dataTables_wrapper').find('.dataTables_length .date-range').attr("value");
			if($.trim(dateRange.length)) {
			// parse the range from a single field into min and max, remove " - "
			dateMin = dateRange.substring(0,4) + dateRange.substring(5,7)  + dateRange.substring(8,10);
			dateMax = dateRange.substring(13,17) + dateRange.substring(18,20) + dateRange.substring(21,23);
	 
			// 4 here is the column where my dates are.
			var date = aData[15];
	 
			// remove the time stamp out of my date
			// 2010-04-11 20:48:22 -> 2010-04-11
			date = date.substring(0,10);
			// remove the "-" characters
			// 2010-04-11 -> 20100411
			date = date.substring(0,4) + date.substring(5,7) + date.substring( 8,10 )
	 
			// run through cases
			if ( dateMin == "" && date <= dateMax){
				return true;
			}
			else if ( dateMin =="" && date <= dateMax ){
				return true;
			}
			else if ( dateMin <= date && "" == dateMax ){
				return true;
			}
			else if ( dateMin <= date && date <= dateMax ){
				return true;
			}
			// all failed
			return false;
			} else {
				return true;
			}
		}
	);		
var opt = {
				"sScrollX": '1000px',
					"oLanguage":{
						"sSearch": "",
						"sLengthMenu": "Date <input type='text' name='date_range' class='date-range' /> Limit: _MENU_"
					}
			};
    $('#example').dataTable(opt);
	$('input[name="date_range"]').daterangepicker( { 
		format: 'YYYY-MM-DD',
		opens : 'left',
	});
	$('input[name="date_range"]').on('apply.daterangepicker', function(ev, picker) {
	  console.log($(this).closest('.dataTables_wrapper').find('.dataTable'));
	  oTable = $(this).closest('.dataTables_wrapper').find('.dataTable').dataTable();
	  oTable.fnDraw();
	});