查看: 471|回复: 0

[.NET源码] Asp.net MVC 中利用jquery datatables 实现数据分页显示功能

发表于 2018-1-1 08:00:00

1、Controller中的方法代码如下:

由于方法中的存储过程没有带分页参数,所以还可以有继续优化的空间。

  1. /// <summary>
  2. /// 获取测点列表
  3. /// </summary>
  4. /// <returns></returns>
  5. [HttpPost]
  6. public JsonResult GetMeasurePointList(string TreeID, string TreeType, int sEcho, int iDisplayStart, int iDisplayLength)
  7. {
  8. DataTable dtResult = new DataTable();
  9. string sql = string.Format("EXEC P_GET_ZXJG_TagList '{0}','小贝'", TreeID, TreeType);
  10. dtResult = QuerySQL.GetDataTable(sql);
  11. dtResult.Columns.Add("XuHao", typeof(string));
  12. dtResult.Columns.Add("StrValueTime", typeof(string));
  13. for (int i = 0; i < dtResult.Rows.Count; i++)
  14. {
  15. dtResult.Rows[i]["XuHao"] = (i + 1).ToString();
  16. dtResult.Rows[i]["StrValueTime"] = Convert.ToDateTime(dtResult.Rows[i]["F_ValueTime"]).ToString("yyyy-MM-dd HH:mm:ss");
  17. }
  18. int iTotalRecords = 0;
  19. int iTotalDisplayRecords = 0;
  20. List<DataRow> queryList = dtResult.AsEnumerable().ToList();
  21. iTotalRecords = queryList.Count();
  22. queryList = queryList.Skip(iDisplayStart).Take(iDisplayLength).ToList();
  23. iTotalDisplayRecords = queryList.Count();
  24. var temp = from p in queryList
  25. select new
  26. {
  27. XuHao = p.Field<string>("XuHao").ToString(),
  28. F_Description = p.Field<string>("F_Description").ToString(),
  29. StrValueTime = p.Field<string>("StrValueTime").ToString(),
  30. F_Value = p.Field<decimal>("F_Value").ToString(),
  31. F_Unit = p.Field<string>("F_Unit").ToString(),
  32. F_AlmLow = p.Field<decimal>("F_AlmLow").ToString(),
  33. F_AlmUp = p.Field<decimal>("F_AlmUp").ToString()
  34. };
  35. return Json(new
  36. {
  37. draw = sEcho,
  38. recordsFiltered = iTotalRecords,
  39. recordsTotal = iTotalDisplayRecords,
  40. data = temp.ToList()
  41. }, JsonRequestBehavior.AllowGet);
  42. }
复制代码

2、cshtml视图页面中代码如下:

  1. function InitData() {
  2. var dataTable = $('#tbMeasurePointList').DataTable({
  3. "scrollY": "hidden",
  4. "scrollCollapse": false,
  5. "dom": 'tr<"bottom"lip><"clear">',
  6. language: {
  7. lengthMenu: '',//左上角的分页大小显示。
  8. search: '<span class="label label-success">搜索:</span>',//右上角的搜索文本,可以写html标签
  9. loadingRecords: '数据加载中...',
  10. paginate: {
  11. //分页的样式内容。
  12. previous: "上一页",
  13. next: "下一页",
  14. first: "",
  15. last: ""
  16. },
  17. zeroRecords: "暂无数据",//table tbody内容为空时,tbody的内容。
  18. //下面三者构成了总体的左下角的内容。
  19. info: "<span class='pagesStyle'>总共<span class='recordsStyle'> _TOTAL_ 条,计 _PAGES_ </span>页,当前显示 _START_ -- _END_ 条记录 </span>",//左下角的信息显示,大写的词为关键字。初始_MAX_ 条
  20. infoEmpty: "0条记录",//筛选为空时左下角的显示。
  21. infoFiltered: ""//筛选之后的左下角筛选提示,
  22. },
  23. "lengthChange": false,
  24. "ordering": false,
  25. "iDisplayLength": 10,
  26. "searching": false,
  27. destroy: true, //Cannot reinitialise DataTable,解决重新加载表格内容问题
  28. "serverSide": true,
  29. "sAjaxSource": "@Url.Action("GetMeasurePointList", "OnlineMonitor")",
  30. "fnServerData": function (sSource, aoData, fnCallback) {
  31. aoData.push({ "name": "TreeID", "value": $("#hidTreeID").val() });
  32. aoData.push({ "name": "TreeType", "value": $("#hidTreeType").val() });
  33. $.ajax({
  34. "dataType": 'json',
  35. "type": "POST",
  36. "url": sSource,
  37. "data": aoData,
  38. "success": fnCallback
  39. });
  40. },
  41. "aoColumns": [
  42. { "mDataProp": "XuHao", "width": "50" },
  43. { "mDataProp": "F_Description", "width": "400" },
  44. { "mDataProp": "StrValueTime", "width": "200" },
  45. { "mDataProp": "F_Value", "width": "100" },
  46. { "mDataProp": "F_Unit", "width": "100" },
  47. { "mDataProp": "F_AlmLow", "width": "100" },
  48. { "mDataProp": "F_AlmUp", "width": "100"}
  49. ],
  50. "createdRow": function (row, data, index) {
  51. $(row).children('td').eq(0).attr('style', 'text-align: center;');
  52. $(row).children('td').eq(1).attr('style', 'text-align: left;');
  53. $(row).children('td').eq(2).attr('style', 'text-align: center;');
  54. $(row).children('td').eq(3).attr('style', 'text-align: right;');
  55. $(row).children('td').eq(4).attr('style', 'text-align: center;');
  56. $(row).children('td').eq(5).attr('style', 'text-align: right;');
  57. $(row).children('td').eq(6).attr('style', 'text-align: right;');
  58. }
  59. });
  60. }
复制代码

3、实际显示效果如下图所示:

以上所述是小编给大家介绍的asp.net MVC 中利用jquery datatables 实现数据分页显示,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对程序员之家网站的支持!



回复

使用道具 举报