Html DataTable

Set the serverProcessing property of the jqxDataTable. Author: http://jqwidgets.com

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="dataTable"></div>

JavaScript

var source = {
     dataType: "json",
     dataFields: [{
         name: 'ShipCountry',
         type: 'string'
     }, {
         name: 'ShipCity',
         type: 'string'
     }, {
         name: 'ShipAddress',
         type: 'string'
     }, {
         name: 'ShipName',
         type: 'string'
     }, {
         name: 'Freight',
         type: 'number'
     }, {
         name: 'ShippedDate',
         type: 'date'
     }],
     root: 'value',
     url: "http://services.odata.org/V3/Northwind/Northwind.svc/Orders?$format=json"
 };
 var filterChanged = false;
 var dataAdapter = new $.jqx.dataAdapter(source, {
     formatData: function (data) {
         if (data.sortdatafield && data.sortorder) {
             data.$orderby = data.sortdatafield + " " + data.sortorder;
         }
         if (data.filterslength) {
             filterChanged = true;
             var filterParam = "";
             for (var i = 0; i < data.filterslength; i++) {
                 var filterValue = data["filtervalue" + i];
                 var filterCondition = data["filtercondition" + i];
                 var filterDataField = data["filterdatafield" + i];
                 var filterOperator = data[filterDataField + "operator"];
                 var startIndex = 0;
                 if (filterValue.indexOf('-') == -1) {
                     if (filterCondition == "CONTAINS") {
                         filterParam += "substringof('" + filterValue + "', " + filterDataField + ") eq true";
                         filterParam += " " + filterOperator + " ";
                     }
                 } else {
                     if (filterDataField == "ShippedDate") {
                         var dateGroups = new Array();
                         var startIndex = 0;
                         var item = filterValue.substring(startIndex).indexOf('-');
                         while (item > -1) {
                             dateGroups.push(filterValue.substring(startIndex, item + startIndex));
      ...