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;
}
}
datatable转layui表格v2[分页and带模板]【偏实例】的更多相关文章
- datatable转layui表格【偏原理】
如题这个类负责把datatable转换为layui表格可以显示的内容.适合配合表格url字段的webapi服务端,为其返回响应字符串.代码如下:using System;using System.We ...
- Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能
Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如 ...
- FineUIMvc表格数据库分页,使用CYQ.Data组件
首先看下前台 View 的定义: @(F.Grid() .EnableCheckBoxSelect(true) .Width(850) .ShowHeader(true) .ShowBorder(tr ...
- easyui combogrid下拉表格的分页/按键/动态搜索
作者:xfl4629712 < easyui combogrid下拉表格的分页/按键/动态搜索 > 需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下 ...
- layui表格参数
layui表格对数据进行用table样式展现 举个例子: <!doctype html> <html> <head> <meta charset=" ...
- 基于bootstrap3的 表格和分页的插件
如题 样式呢就是bootstrap3 的 功能呢就是实现表格和分页 (以上废话) 本来是自己没事儿写的一个js插件,曾经搁浅了一阵子,但最近由于公司项目的原因也需要这样的一个插件,所以就捡起来做了个可 ...
- layui 表格在排序之后没有重新渲染问题
问题描述: 在layui表格中,最后一列增加了操作按钮,并且在某些行设置了样式,但是在排序之后,按钮的点击事件失效了,样式也没有了,可能是没有执行done回调 原因: done回调只有在render和 ...
- 在Bootstrap开发框架中使用dataTable直接录入表格行数据(2)--- 控件数据源绑定
在前面随笔<在Bootstrap开发框架中使用dataTable直接录入表格行数据>中介绍了在Web页面中使用Jquery DataTable插件进行对数据直接录入操作,这种处理能够给用户 ...
- 在Bootstrap开发框架中使用dataTable直接录入表格行数据
在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单 ...
随机推荐
- DDL、DML、TCL
一.DDL 1.创建表(CREATE) (1)数据库对大小写不敏感,只对字符串大小写敏感. (2)使用create关键字创建表.(-- 表示注释). 格式: CREATE TABLE 表名( 字段名1 ...
- [转]Oracle 11g R2 RAC高可用连接特性 – SCAN详解
原文地址:http://czmmiao.iteye.com/blog/2124373 昨天帮朋友解决11g RAC SCAN问题,当时为这朋友简单解答了一些SCAN特性相关的问题,但我知道这仅仅是 ...
- js对象比较
使用闭包实现 js 对象按指定属性进行大小比较 需要比较的对象 let obj1 = { name:'张三', age:19 }; let obj2 = { name:'李四', age:22 }; ...
- BayaiM__Oracle ASM操作管理
BayaiM__Oracle ASM操作管理 BayaiM__Oracle ASM操作管理 ...
- AtCoder Beginner Contest 145
传送门 A - Circle 签到. B - Echo 签到到. C - Average Length 要卡下精度,可用二分或者long double来搞. Code /* * Author: hey ...
- 2018年蓝桥杯A组C/C++决赛题解
2018年第九届蓝桥杯A组C/C++决赛题解 点击查看视频题解 点击查看2018年蓝桥杯A组C/C++决赛题目(不含答案) 1:三角形面积 画个图,求三角形面积,可以用外接长方形 - 其他多余区域面积 ...
- [C14] 总结(Conclusion)
总结(Conclusion) 总结和致谢(Summary and Thank You) 欢迎来到<机器学习>课的最后一段视频.我们已经一起学习很长一段时间了.在最后这段视频中,我想快速地回 ...
- ShiroUtil 对密码进行加密
ShiroUtil 对密码进行加密 package com.mozq.sb.shiro02.config; import org.apache.shiro.authc.SimpleAuthentica ...
- celery 异步发送短信验证码、延迟任务
短信 celery.py import os, django os.environ.setdefault("DJANGO_SETTINGS_MODULE", "luffy ...
- Python 链表(linked list)
链表是一种物理存储单元上非连续.非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的 链表由一系列结点组成,结点可以在运行时动态生成 优点 由于不必须按顺序存储,链表在插入.删除的时候 ...