Asp.net MVC 中利用jquery datatables 实现数据分页显示功能

1、controller中的方法代码如下：

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

/// <summary>
    /// 获取测点列表
    /// </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、cshtml视图页面中代码如下：

function initdata() {
    var datatable = $('#tbmeasurepointlist').datatable({
      "scrolly": "hidden",
      "scrollcollapse": false,
      "dom": 'tr<"bottom"lip><"clear">',
      language: {
        lengthmenu: '',//左上角的分页大小显示。
        search: '<span class="label label-success">搜索：</span>',//右上角的搜索文本，可以写html标签
        loadingrecords: '数据加载中...',
        paginate: {
          //分页的样式内容。
          previous: "上一页",
          next: "下一页",
          first: "",
          last: ""
        },
        zerorecords: "暂无数据",//table tbody内容为空时，tbody的内容。
        //下面三者构成了总体的左下角的内容。
        info: "<span class='pagesstyle'>总共<span class='recordsstyle'> _total_ 条,计 _pages_ </span>页，当前显示 _start_ -- _end_ 条记录 </span>",//左下角的信息显示，大写的词为关键字。初始_max_ 条 
        infoempty: "0条记录",//筛选为空时左下角的显示。
        infofiltered: ""//筛选之后的左下角筛选提示，
      },
      "lengthchange": false,
      "ordering": false,
      "idisplaylength": 10,
      "searching": false,
      destroy: true, //cannot reinitialise datatable,解决重新加载表格内容问题 
      "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、实际显示效果如下图所示：

以上所述是小编给大家介绍的asp.net mvc 中利用jquery datatables 实现数据分页显示，希望对大家有所帮助