In Asp.net MVC, jquery datatables is used to display data by page. jquerydatatables

In Asp.net MVC, jquery datatables is used to display data by page. jquerydatatables

1. The method code in Controller is as follows:

Because the stored procedure in the method does not contain paging parameters, there is still room for further optimization.

/// <Summary> /// obtain the measurement point list /// </summary> /// <returns> </returns> [HttpPost] public JsonResult GetMeasurePointList (string TreeID, string TreeType, int sEcho, int iDisplayStart, int iDisplayLength) {DataTable dtResult = new DataTable (); string SQL = string. format ("EXEC P_GET_ZXJG_TagList '{0}', '{1}'", TreeID, TreeType); dtResult = QuerySQL. getDataTable (SQL); dtResult. columns. add ("XuHao", typeof (string); dtResult. columns. add ("StrValueTime", typeof (string); for (int I = 0; I <dtResult. rows. count; I ++) {dtResult. rows [I] ["XuHao"] = (I + 1 ). toString (); dtResult. rows [I] ["StrValueTime"] = Convert. toDateTime (dtResult. rows [I] ["F_ValueTime"]). toString ("yyyy-MM-dd HH: mm: ss") ;}int iTotalRecords = 0; int iTotalDisplayRecords = 0; List <DataRow> queryList = dtResult. asEnumerable (). toList (); iTotalRecords = queryList. count (); queryList = queryList. skip (iDisplayStart ). take (iDisplayLength ). toList (); iTotalDisplayRecords = queryList. count (); var temp = from p in queryList select new {XuHao = p. field <string> ("XuHao "). toString (), F_Description = p. field <string> ("F_Description "). toString (), StrValueTime = p. field <string> ("StrValueTime "). toString (), F_Value = p. field <decimal> ("F_Value "). toString (), F_Unit = p. field <string> ("F_Unit "). toString (), F_AlmLow = p. field <decimal> ("F_AlmLow "). toString (), F_AlmUp = p. field <decimal> ("F_AlmUp "). toString ()}; return Json (new {draw = sEcho, recordsFiltered = iTotalRecords, recordsTotal = iTotalDisplayRecords, data = temp. toList ()}, JsonRequestBehavior. allowGet );}

2. The code on the cshtml view page is as follows:

Function InitData () {var dataTable = $ ('# tbMeasurePointList '). dataTable ({"scrollY": "hidden", "scrollCollapse": false, "dom": 'tr <"bottom" lip> <"clear"> ', language: {lengthMenu: '', // display the page size in the upper left corner. Search: '<span class = "label-success"> search: </span>', // search text in the upper right corner. You can write the html Tag loadingRecords: 'loading data... ', paginate: {// pagination style content. Previous: "previous Page", next: "next page", first: "", last: ""}, zeroRecords: "No data", // when the table tbody content is null, tbody content. // The following three constitute the content in the lower left corner of the population. Info: "<span class = 'pagesstyle'> TOTAL <span class = 'recordsstyle'> _ TOTAL _ items, PAGES of _ PAGES _ </span>, currently, _ START _ -- _ END _ record </span> "is displayed. // The information in the lower left corner is displayed. uppercase words are keywords. Initial _ MAX _ infoEmpty: "0 records", // display in the lower left corner when filtering is empty. InfoFiltered: "" // filtering prompt in the lower left corner after filtering,}, "lengthChange": false, "ordering": false, "iDisplayLength": 10, "searching": false, destroy: true, // Cannot reinitialise DataTable to solve the "serverSide": true, "sAjaxSource": "@ Url. action ("GetMeasurePointList", "OnlineMonitor") "," fnServerData ": function (sSource, aoData, fnCallback) {aoData. push ({"name": "TreeID", "value": $ ("# hidTreeID "). val ()}); aoData. push ({"name": "TreeType", "value": $ ("# hidTreeType "). val ()}); $. ajax ({"dataType": 'json', "type": "POST", "url": sSource, "data": aoData, "success ": fnCallback}) ;}, "aoColumns": [{"mDataProp": "XuHao", "width": "50" },{ "mDataProp": "F_Description ", "width": "400" },{ "mDataProp": "StrValueTime", "width": "200" },{ "mDataProp": "F_Value", "width ": "100" },{ "mDataProp": "F_Unit", "width": "100" },{ "mDataProp": "F_AlmLow", "width ": "100" },{ "mDataProp": "F_AlmUp", "width": "100"}], "createdRow": function (row, data, index) {$ (row ). children ('td '). eq (0 ). attr ('style', 'text-align: center; '); $ (row ). children ('td '). eq (1 ). attr ('style', 'text-align: left; '); $ (row ). children ('td '). eq (2 ). attr ('style', 'text-align: center; '); $ (row ). children ('td '). eq (3 ). attr ('style', 'text-align: right; '); $ (row ). children ('td '). eq (4 ). attr ('style', 'text-align: center; '); $ (row ). children ('td '). eq (5 ). attr ('style', 'text-align: right; '); $ (row ). children ('td '). eq (6 ). attr ('style', 'text-align: right ;');}});}

3. shows the actual display effect:

The above section describes how to use jquery datatables in Asp.net MVC to display data by page. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!