本项目由普通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;
}
}

datatable转layui表格v2[分页and带模板]【偏实例】的更多相关文章

  1. datatable转layui表格【偏原理】

    如题这个类负责把datatable转换为layui表格可以显示的内容.适合配合表格url字段的webapi服务端,为其返回响应字符串.代码如下:using System;using System.We ...

  2. Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能

    Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如 ...

  3. FineUIMvc表格数据库分页,使用CYQ.Data组件

    首先看下前台 View 的定义: @(F.Grid() .EnableCheckBoxSelect(true) .Width(850) .ShowHeader(true) .ShowBorder(tr ...

  4. easyui combogrid下拉表格的分页/按键/动态搜索

    作者:xfl4629712  <  easyui combogrid下拉表格的分页/按键/动态搜索  > 需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下 ...

  5. layui表格参数

    layui表格对数据进行用table样式展现 举个例子: <!doctype html> <html> <head> <meta charset=" ...

  6. 基于bootstrap3的 表格和分页的插件

    如题 样式呢就是bootstrap3 的 功能呢就是实现表格和分页 (以上废话) 本来是自己没事儿写的一个js插件,曾经搁浅了一阵子,但最近由于公司项目的原因也需要这样的一个插件,所以就捡起来做了个可 ...

  7. layui 表格在排序之后没有重新渲染问题

    问题描述: 在layui表格中,最后一列增加了操作按钮,并且在某些行设置了样式,但是在排序之后,按钮的点击事件失效了,样式也没有了,可能是没有执行done回调 原因: done回调只有在render和 ...

  8. 在Bootstrap开发框架中使用dataTable直接录入表格行数据(2)--- 控件数据源绑定

    在前面随笔<在Bootstrap开发框架中使用dataTable直接录入表格行数据>中介绍了在Web页面中使用Jquery DataTable插件进行对数据直接录入操作,这种处理能够给用户 ...

  9. 在Bootstrap开发框架中使用dataTable直接录入表格行数据

    在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单 ...

随机推荐

  1. LinuxShell脚本——循环结构

    LinuxShell脚本——循环结构 摘要:本文主要学习了Shell脚本中的循环结构. while循环 基本语法 while循环是最简单的一种循环,如果条件满足则执行循环里的语句,如果条件不满足则退出 ...

  2. Javase之集合体系之(1)集合顶层类Collection与其迭代器知识

    集合体系之集合顶层类Collection与其迭代器知识 集合的由来:Java是一门面向对象语言,而面向对象语言对事物的描述是通过对象体现的,为了方便对多个对象进行操作,就必须把多个对象进行存储,而要存 ...

  3. crm-4权限

    1.rbac-优化login函数 因为login是业务逻辑 ,而rbac是个组件 ,将rbac在login的代码分离 ###初始化权限函数分离出去 rbac/service/permission fr ...

  4. C#如何将DataTable中的列名复制到另一个DataTable

    C#如何将DataTable中的列名复制到另一个DataTable? 仅复制列名,不复制列下的数据: var newDt = new DataTable(); newDt = oldDataTable ...

  5. 【C#】学习笔记(2)委托Delegate相关

    泛型委托类型,同样是根据杨老师的视频来的. 直接上栗子

  6. [转]English - 开口说话工具箱: 27个高频词单词

    本文转自:https://blog.csdn.net/weixin_34247032/article/details/87125465 英语初学者注意力不要放在语法上, 首先要懂得如何让自己开口说英语 ...

  7. Linux统计文件夹、文件数量的命令

    # 查看当前目录下的文件数量(不包含子目录中的文件) ls -l|grep "^-"| wc -l # 查看当前目录下的文件数量(包含子目录中的文件) 注意:R,代表子目录 ls ...

  8. emacs 窗口控制

    1,调整窗口大小 c-c ^ 窗口变高 c-c } 窗口变宽 c-c { 窗口变窄 2,窗口间移动 ;;这一条语句的作用是让 windmove 在边缘的窗口也能正常运作.举个例子,当前窗口已\\ 经是 ...

  9. WindowsServer2003中IIS支持php的配置

    1.安装MySQL(没有特殊说明的就按照默认安装)选择 Custom 自定义安装点击"Change"更改 MySQL 安装目录(自定义)其他按照默认的下一步就可以 安装完成后会自动 ...

  10. STM32HAL快速上手

    STM32HAL快速上手 资料下载 如果在下面的网站中没有账户,建议用edu邮箱创建账户. STMicroeletronic 意法半导体官网 首页 - STMicroelectronics 意法半导体 ...