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对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单 ...
随机推荐
- Python 爬取大众点评 50 页数据,最好吃的成都火锅竟是它!
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 胡萝卜酱 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...
- PHP+Ajax微信手机端九宫格抽奖实例
PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现.支持可以设置中奖概率等. 奖品列表 <div class="lottery ...
- Java生鲜电商平台-微服务架构概述
Java生鲜电商平台-微服务架构概述 单体架构存在的问题 在传统的软件技术架构系统中,基本上将业务功能集中在单一应用内,或者是单一进程中.尽管现代化的软件架构理论以及设计原则已推广多年,但实际技术衍化 ...
- 官宣:腾讯WeTest明星工具-PerfDog面向全球发布!
导读 PerfDog(官网:perfdog.qq.com)作为移动全平台性能测试分析专业工具,在腾讯内部研发测试工具商店-WeTest Store上线后服务了近2000+名开发者,其中<王者荣耀 ...
- ios获取摄像头
NSError *error = nil; session = [[AVCaptureSession alloc] init] ; session.sessionPreset = AVCaptureS ...
- 剑指offer 11:变态跳台阶
题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级……它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 解法:使用数学归纳法可得,跳n级台阶的跳法一共有f(n)=2n-1中,即本 ...
- 模板引擎Jinja2的基本用法
Flask提供的模板引擎为Jinja2,易于使用,功能强大.模板仅仅是文本文件,它可以生成任何基于文本的格式(HTML.XML.CSV.LaTex 等等). 它并没有特定的扩展名, .html 或 . ...
- 成功安装mysql后,为何服务管理器里找不到MYSQL服务名【转】
解决方案:(参考以下命令) 1.打开cmd,切换到mysql的bin目录下 2. D:\Program Files\MySQL5.1\bin>mysqld.exe -install Servic ...
- Linux—运行yum报错:No module named yum
产生原因:yum基于python写的,根据报错信息提示,是yum的python版本对应不上目前python环境的版本导致的.也就是说 有人升级或者卸载了python. 解决方式: # 查看yum版本 ...
- Linux同一机器设置多个IP2019-7-6
1.临时增加 1)先查看目前的网卡信息 [root@study ~]# ifconfigeno16777736: flags=4163<UP,BROADCAST,RUNNING,MULTICAS ...