jQuery Datatables impl Example

by Ratan Paul

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
    
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/flick/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">

<script type="text/javascript" src="https://www.datatables.net/release-datatables/extensions/Scroller/js/dataTables.scroller.js"></script>
<script type="text/javascript" src="https://rawgit.com/the86freak/colResize/master/dataTables.colResize.js"></script>
<script type="text/javascript" src="https://rawgit.com/vedmack/yadcf/0.8.8/jquery.dataTables.yadcf.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/vedmack/yadcf/0.8.7/jquery.dataTables.yadcf.css">

<table id="myTable" class="display" cellspacing="0">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>06/22/2015</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
      ...

CSS

/*the following styles are for single-line tables*/
table {
    table-layout: fixed;
    width: 100%;
}
td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*
 * Namespace DTCR - "DataTables ColReorder" plug-in
 */

/*
 table.DTCR_clonedTable {
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 202;
}
div.DTCR_pointer {
    width: 1px;
    background-color: #0259C4;
    z-index: 201;
}
body.alt div.DTCR_pointer {
    margin-top: -15px;
    margin-left: -9px;
    width: 18px;
    background: url('../images/insert.png') no-repeat top left;
}*/

/*
 * Namespace: DTS (DataTables Scroller)
 */

/*

div.DTS tbody th,
div.DTS tbody td {
	white-space: nowrap;
}

div.DTS tbody tr.even {
	background-color: white;
}

div.DTS div.DTS_Loading {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 20px;
	margin-top: -20px;
	margin-left: -100px;
	z-index: 1;

	border: 1px solid #999;
	padding: 20px 0;
	text-align: center;
	background-color: white;
	background-color: rgba(255, 255, 255, 0.5);
}

div.DTS div.dataTables_scrollHead,
div.DTS div.dataTables_scrollFoot {
	background-color: white;
}

div.DTS div.dataTables_scrollBody {
	z-index: 2;
}

div.DTS div.dataTables_scroll {
	background: url('../images/loading-background.png') repeat 0 0;
}*/

JavaScript

var cdnp;
(function (cdnp) {
    var DynTableGui = (function () {

        function DynTableGui(tableId, height) {
            this.tableId = tableId;
            this.jsfConfig = {};

            this.processingHtml = "<div style=\"position:relative;width:100%;height:100%;\">LOADING...<br><div class=\"loadingImage\"></div></div>";

            this.tableConfig = {
                "dom": "rti", //Z: colResize; r: pRocessing; t: table; i: info; S: Scrollable,
                "paging": false,
                "scrollX": true,
                "scrollY": height,
                "scrollCollapse": false, // set to false as o/w the footer would collapse when the content is not as much as to fill the full height.
                "responsive": false,
                    "processing": false,
                    "autoWidth": false,
                    "columnDefs": [
                //{ "width": "10%", "targets": 0 },
                //{ "width": "200px", "targets": 1 },
                {
                    "width": "150px",
                    "targets": [0, 1, 2, 3, 4]
                }
                //{ "width": "200px", "targets": 0 },
                //{ "width": "10px", "targets": [1,2,3] }
                ],
                    "language": {
                    "processing": this.processingHtml
                }
                /*,
                    "colResize": {
                    "tableWidthFixed": false
                }*/
            };
            //this.jsfConfig = JSON.parse($('#ccConfig').html());
            this.table = $(this.tableId).DataTable(this.tableConfig);
            yadcf.init(this.table, [{
                column_number: 3,
                filter_type: "range_number",
                filter_reset_button_text: false
            }, {
                column_number: 4,
                filter_type: "date",
                filter_reset_button_text: false
            }, {
                column_number: 1,
                filter_type:...