zoukankan      html  css  js  c++  java
  • 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', 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;
    }
    }

  • 相关阅读:
    fiddler模拟弱网测试环境
    3.12 获取地址定位
    3.11 第一次个人作业7
    3.10 第一次个人作业6
    3.9 第一次个人作业5
    3.8 第一次个人作业4
    3.7 第一个次个人作业3
    3.6 第一次个人作业2
    3.5 第一次个人作业
    3.4 TextClock的基本使用
  • 原文地址:https://www.cnblogs.com/wanjinliu/p/11856545.html
Copyright © 2011-2022 走看看