Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Plugin for server side processing for jQuery datatables.

License

NotificationsYou must be signed in to change notification settings

VladimirDimov/jQuery-Datatables-Server-Side-Processing

Repository files navigation

ASP NET component which adds functionality for automatic server side processing for the famous table plugin for jQuery.

Supports:

  • Paging;
  • Searching;
  • Sorting;
  • Custom filters: Less Than, Less than or equal, Greater than, Greater than or equal and Equal;
  • Nested objects;

Currently tested with Entity Framework versions 6.0.0 and 6.2.0 and Datatables version 1.10.16.

Install

MVC 5

Install nuget package

Install-Package jQDataTables.ServerSide.MVC5

How to use on the server side

How to use with MVC 5

How to use on the client side

For how to install the jQuery Datatables plugin refer to the official documentationhere

Here you can find how to configure for server side processing.

In order to map the ajax response to the correct columns the columns property must be configure in the configuration object.

Example:

vartable=$('table').DataTable({"proccessing":true,"serverSide":true,"ajax":{url:"path to the data source",type:'POST'},"language":{"search":"","searchPlaceholder":"Search..."},"columns":[{"data":"CustomerID","searchable":false},{"data":"Person.FirstName","searchable":true},{"data":"Person.LastName","searchable":true},{"data":"Store.Name","searchable":true},]});

Searching

Read how to use on the client side fromhere

The searching is performed only on string columns. Therefore the searchable parameter inside the columns property must be set to false. Only the string columns with the searchable parameter set to true will be included in the search.

Individual column filtering

Read how to use on the client side fromhere.

For all string columns the individual column filter will work as case insensitive search. For other types it will match the exact value. For DateTime types it will match the value with precision to the seconds.

Nested objects

Read how to use on the client side fromhere.

Custom filters

To use the predefined custom filters the data property of the configuration object must be configured properlylink.

The following custom filters are supported on the server side:

  • gt : greater than;
  • gte : greater than or equal;
  • lt : less than;
  • lte : less than or equal;
  • eq : eqaul;
Example:
<div>    CreditRating: from<inputtype="number"id="minCreditRating"value="1"class="reload-table"/>    to<inputtype="number"id="maxCreditRating"value="3"class="reload-table"/></div><div>    Business Entity ID =<inputtype="number"id="businessEntityId"value=""class="reload-table"/></div><div>    Modified Date =<inputtype="date"id="modifiedDate"value=""class="reload-table"/></div><div>    Account Number =<inputtype="text"id="accountNumber"value=""class="reload-table"/></div><tableid="SearchResultTable"class="display"cellspacing="0"width="100"><thead><tr><th>BusinessEntityID</th><th>CreditRating</th><th>ActiveFlag</th><th>AccountNumber</th><th>ModifiedDate</th></tr></thead><tfoot><tr><th>BusinessEntityID</th><th>CreditRating</th><th>ActiveFlag</th><th>AccountNumber</th><th>ModifiedDate</th></tr></tfoot></table>@section Scripts {<script>vartable=$('#SearchResultTable').DataTable({"proccessing":true,"serverSide":true,"ajax":{url:"@Url.Action("GetVendorsData","Vendors")",type:'POST',"data":function(d){d.custom={"filters":{"CreditRating":{"gte":$('#minCreditRating').val(),"lte":$('#maxCreditRating').val()},"BusinessEntityID":{"eq":$('#businessEntityId').val()},"ModifiedDate":{"eq":$('#modifiedDate').val()},"AccountNumber":{"eq":$('#accountNumber').val()},}}}},"language":{"search":"","searchPlaceholder":"Search..."},"columns":[{"data":"BusinessEntityID",searchable:false},{"data":"CreditRating",searchable:false},{"data":"ActiveFlag","searchable":false},{"data":"AccountNumber",searchable:true},{"data":"ModifiedDate","searchable":false},],"columnDefs":[{"render":function(data,type,row){date=newDate(parseInt(row.ModifiedDate.replace("/Date(","").replace(")/",""),10));returndate.toLocaleDateString();},"targets":4}]});$('.reload-table').on('change',function(){table.ajax.reload();});</script>}
[8]ページ先頭
©2009-2025 Movatter.jp