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对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单 ...
随机推荐
- HTML颜色名称大全
所有浏览器支持的颜色名称,所有现代浏览器都支持以下140种颜色名称(单击颜色名称或十六进制值,以将颜色视为背景颜色以及不同的文本颜色): 有关HTML颜色的完整概述,请访问我们的颜色教程. 颜色名称 ...
- 2-2-for循环
重复执行某些代码 每次执行的时候有个数字在变化 常用格式 <script> for(var i=0; i<3; i++){alert(i); } </script> 1) ...
- Android框架Volley使用:Post请求实现
首先我们在项目中导入这个框架: implementation 'com.mcxiaoke.volley:library:1.0.19' 在AndroidManifest文件当中添加网络权限: < ...
- sleep() 和 wait() 有什么区别:
①原理不同. sleep()方法是Thread类的静态方法,是线程用来控制自身流程的,它会使此线程暂停执行一段时间,而把执行机会让给其他线程,等到计时时间一到,此线程会自动苏醒.而wait() ...
- 开始认识java
1.java发展历史 1991年 詹姆斯·高斯林 (James Gosling) SUN公司Green项目(消费类电子产品) Oak ...
- 花了快一天,才搞出来的一个client-go的demo
用来直接获取所有service的annotaion里有ambassador的东东. 或者,watch集群事件. package main import ( "fmt" " ...
- 02-webpack的基本配置-运行webpack
1安装webPack的方式 第一次全局安装 npm i webpack -g 第一次安装了之后以后就不需要在安装了 在项目根录中运行 npm i webpack --save-dev 安装到项目依赖中 ...
- 解决N个人过桥时间最短问题(Java版本)
[问题描述] n个人要晚上过桥,在任何时候最多两个人一组过桥,每组要有一只手电筒.在这n个人中只有一个手电筒能用,因此要安排以某种往返的方式来返还手电筒,使更多的人可以过桥. 注意:每个人的过桥速 ...
- 鲜贝7.3--mysql 下载小问题
安装mysql 5.7.20 及报错 This application requires Visual Studio 2013 Redistributable 问题原因大体是mysql自动安装的Vis ...
- MDK编译优化笔记
在一次使用MDk的编译优化等级比较高的时候发现编译不优化时功能正常,开了优化等级02就出现异常,调试中看了很多博客总结一下. 一个变量,如果你的主程序要用到,同时中断还要用到,要加volatile修饰 ...