datatable转layui表格v2[分页and带模板]【偏实例】_风神修罗使的博客-爱代码爱编程

本项目由普通mvc+webapi接口构成。
按执行顺序，代码如下：
主控制器：

public ActionResult Index(int id=0)
{
ViewData["myid"] = id;
return View();
}

前台关键代码（layui）：

<table id="demo" lay-filter="test"></table>
<script src="~/layui/layui.js"></script>
<script>
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#demo'
, height: 500
, url: '/api/data/?id=@ViewData["myid"].ToString()'
, cols: [[
{ field: 'xxx', title:XXX, fixed: 'left', align: 'center' }
, { field: 'xxx', title: 'XXX', width: 200, align: 'center', templet: '<div>[{{d.class_name}}]</div>' }
]]
, page: {
layout: ['first', 'prev', 'page', 'next', 'last']
, limits: [10]
, groups: 6
, first: 'first'
, last: 'last'
, theme:'#FF0000'
}
});
});
</script>

Webapi控制器代码：

public HttpResponseMessage getdata(int id = 0,int page=1,int limit=10)
{
DataTable dt;
int c;
Article myarticles = new Article(id);
dt = myarticles.get_Articles_by_id(page,limit,out c);
return Layui_Helper.get_Layui_table(dt,c);
}

Article类代码：

public class Article {
  int class_id;
  public Article(int a = 0) {
    class_id = a;
  }
  //根据初始化的id，送入分页信息（当前所在页，每页记录条数），获得当前页datatable和总记录条数count
  public DataTable get_Articles_by_id(int page, int limit, out int count) {
    DataTable dt;
    string sql;
    count = 1;
    if (class_id != 0) {
      Hc_db1.set_Para("cid", class_id);
      sql = "SELECT XXX from OOO where TTT=@cid order by b_date desc , ID desc";
      Hc_db1.set_comm(sql);
      dt = Hc_db1.get_datatable();
    }
    else {
      sql = "SELECT XXX from OOO order by b_date desc , ID desc";
      dt = Hc_db.get_datatable(sql);
    }
    //计数，删除分页不需要的行
    count = dt.Rows.Count;
    for (int i = dt.Rows.Count - 1; i >= 0; i--) {
      if (i < (page - 1) * limit || i >= page * limit) {
        dt.Rows.RemoveAt(i);
      }
    }
    return dt;
  }
}

把datatable转换为layui格式的类：

public class Layui_Helper {
  static string datatable2json(DataTable table) {
    StringBuilder jsonBuilder = new StringBuilder();
    jsonBuilder.Append("\"data\":[");
    for (int i = 0; i < table.Rows.Count; i++) {
      jsonBuilder.Append("{");
      for (int j = 0; j < table.Columns.Count; j++) {
        jsonBuilder.Append("\"");
        jsonBuilder.Append(table.Columns[j].ColumnName);
        jsonBuilder.Append("\":\"");
        jsonBuilder.Append(table.Rows[i][j].ToString());
        jsonBuilder.Append("\",");
      }
      jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
      jsonBuilder.Append("},");
    }
    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
    jsonBuilder.Append("]");
    return jsonBuilder.ToString();
  }
  //送入一个datatable，返回一个layui支持的表格字符串(HttpResponseMessage格式)
  public static HttpResponseMessage get_Layui_table(DataTable dt, int count = 0, int status = 0) {
    StringBuilder s = new StringBuilder();
    HttpResponseMessage responseMessage;
    if (count == 0) {
      count = dt.Rows.Count;
    }
    s.Append("{\"code\":");
    s.Append(status.ToString() + ",");
    s.Append("\"count\":");
    s.Append(count.ToString() + ",");
    s.Append(datatable2json(dt));
    s.Append("}");
    responseMessage = new HttpResponseMessage {
      Content = new StringContent(s.ToString(), Encoding.GetEncoding("UTF-8"), "text/plain")
    };
    return responseMessage;
  }
}