现在有很多表格渲染方式 这里只是记录怎么使用datatables渲染数据

使用datatables可以更方便的来渲染数据

【中文api】http://datatables.club/index.html

在datatables中获取后台自定义的键值对:

initComplete: function (settings,data) {
// settings中有个json属性 可以在里面获取返回的数据对象
},
drawCallback: function(settings,data ) {
// settings中有个json属性 可以在里面获取返回的数据对
}

数据渲染:html代码

  <table  class="table table-striped table-bordered dataTable" id="js_table">
<thead>
<tr >
<th class="text-center">编号</th>
<th class="text-center">服务类型</th>
<th class="text-center">图标</th>
<th class="text-center">修改时间</th>
<th class="text-center">状态</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody></tbody>
</table>

引入相关js :注这是中文api的css、js地址 需要更改为你自己的本地地址

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css"> <!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>

本地js

 <!-- dataTables -->
<link href="~/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<script src="~/js/jquery.dataTables.js"></script>
<script src="~/js/dataTables.bootstrap.min.js"></script>

js代码

//渲染列表  页面初始化时
var t = $("#js_table").DataTable({
"processing": true,
"searching": false,//关闭搜索框
"serverSide": true,//服务器分页
"ajax": {
"url": "/Function/GetMenuData",
"dataSrc": "list",//这里是后台返回的数据对象
"data": function (d) {//d 是原始的发送给服务器的数据,默认很长。
var param = {};//因为服务端排序,可以新建一个参数对象
param.start = d.start;//开始的序号
param.length = d.length;//要取的数据的条数
return param;//自定义需要传递的参数。
}
}, "createdRow": function (row, data, index) {
/* 设置表格中的内容居中 */
$('td', row).attr("class", "text-center");
},
//定义列: 取相应属性字段
"columns": [ { "data": "name" },
{ "data": "serialNumber" },
{ "data": "url" },
{
"data": "type",
"render": function (data, type, full, callback) {
//类型:0导航菜单;1操作按钮。
switch (data) {
case 0: return "导航菜单"; break;
case 1: return "操作按钮 "; break;
}
}
},
{ "data": "remarks" },
//操作列
{
"data": "id",//json
"render": function (data, type, full, callback) {
return ('<a class="btn btn-info" data-toggle="modal" data-target="#modal-addOrUpdate" onclick="details(\'' + data + '\');" >禁用</a><a class="btn btn-info" data-toggle="modal" data-target="#modal-addOrUpdate" onclick="details(\'' + data + '\');" >删除</a>');
}
}
],
"language": {
"lengthMenu": "每页 _MENU_ 条记录",
"zeroRecords": " ",
"info": "当前 _START_ 条到 _END_ 条 共 _TOTAL_ 条",
"infoEmpty": "无记录",
"infoFiltered": "(从 _MAX_ 条记录过滤)",
"search": "用户",
"processing": "载入中",
"paginate": {
"first": "首页",
"previous": "上一页",
"next": "下一页",
"last": "尾页"
}
},
"aLengthMenu": [
[10, 25, 50, 100], [10, 25, 50, 100]
],
"paging": true,//分页
"pagingType": "full_numbers",//显示首页尾页
"ordering": false,//排序
"info": true,//信息
"paging": true,
initComplete: function (settings, data) { },
"drawCallback": function (settings, data) { } });

后台数据:这里是java后台

public Map<String, Object> queryLifeType(String village, Integer pageIndex, Integer pageSize) {
Map<String, Object> map = new HashMap<String, Object>();
//分页排序
Page<?> pageSelect = PageHelper.startPage(pageIndex, pageSize, " row_add_time desc ");
//
LifeType example=new LifeType();
if (!StringUtils.isEmpty(village)) {
//根据小区查询
example.setVillageid(village);
}
//查询数据
List<LifeType> selectByExample=lifeTypeMapper.selectByExample(example); map.put("recordsTotal", pageSelect.getTotal());//这是总页数
map.put("recordsFiltered", pageSelect.getTotal());//这里是记录总条数
map.put("list",selectByExample);//这里对应页面js的 "dataSrc":"list",//这里是后台返回的数据对象
        return map;
}

c#后台返回格式

   Dictionary<string, object> entity = new Dictionary<string, object>();
List<Menu> treeModels = con.Query<Menu>("SELECT Id,ParentId as Parent,`Name` as Text from menu").ToList();
entity.Add("recordsTotal", treeModels.Count);
entity.Add("recordsFiltered", treeModels.Count);
entity.Add("list", treeModels);
return Json(entity);

【日常笔记】datatables表格数据渲染的更多相关文章

  1. [BUGCASE]FixedDataTable表格数据渲染错误

    一.问题描述 广告配置中绑定第三方规格ID表格数据,有一部分展示错乱,具体如下: 表格组件使用 Facebook 的 (fixed-data-table) 组件 二.原因分析 1.检查props 先查 ...

  2. layui表格数据渲染SpringBoot+Thymeleaf返回的数据时报错(Caused by: org.attoparser.ParseException: Could not parse as expression: ")

    layui table渲染数据时报错(Caused by: org.attoparser.ParseException: Could not parse as expression: ") ...

  3. 超全table功能Datatables使用的填坑之旅--1: 无法渲染表格数据: ajax调用了参数 : success

    问题:Datatables: 无法渲染表格数据 原因:datatables的ajax 传了"success":function(){},导致无法渲染数据. ajax 删掉" ...

  4. Angular将填入表单的数据渲染到表格

    一.项目简介 我们将采用Angular框架来做一个demo,这个demo将要实现的功能如下: 在X坐标和Y坐标文本框输入信息,然后点击添加,就会在下面表格 中出现一项相应的数据,点击每一项旁边的删除按 ...

  5. Vue电商后台管理系统项目第2天-首页添加表格动态渲染数据&分页

    0x01.使用Github学习的姿势 基于昨天的内容,今天的内容需要添加几个单文件组件,路由文件也需要做相应的增加,今天重点记录使用Element-UI中的表格组件实现数据动态渲染的实现流程和分页功能 ...

  6. vue学习笔记:数据渲染操作

    {{xxx}} 基本的插值表达式 插值表达式 使用两个大括号 {{ data中定义的数据名 }} 可以将数据插入到指定的位置 这种写法不仅可以显示data属性里定义的值,也可以书写js中的表达式,可以 ...

  7. datatables表格

    datatables表格 并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭,当然对于专业的 ...

  8. JAVA Freemarker + Word 模板 生成 Word 文档 (普通的变量替换,数据的循环,表格数据的循环,以及图片的东替换)

    1,最近有个需求,动态生成 Word 文当并供前端下载,网上找了一下,发现基本都是用 word 生成 xml 然后用模板替换变量的方式 1.1,这种方式虽然可行,但是生成的 xml 是在是太乱了,整理 ...

  9. 前端常用功能记录(三)—datatables表格初始化

    其实上篇说的也算是jQuery Datatables的初始化,但主要是对某些字段意义的理解.下面记录的是datatables常用的功能的初始化. 数据源 我经常使用的有两种,一种是JavaScript ...

随机推荐

  1. jQuery UI常用插件使用

    一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行 注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...

  2. java 25 - 4 网络编程之 UDP协议传输的代码优化

    UDP协议的输出端: /* UDP发送数据: A:创建Socket发送端对象 B:创建数据报包(把数据打包) C:调用Socket对象发送数据报包 D:释放资源(底层是IO流) */ public c ...

  3. java 22 - 8 多线程之线程生命周期图解

  4. swift基本用法-数组array

    数组简单用法 //------------------------------------------------------------------------------ // 1. 数组定义 / ...

  5. GridView EmptyDataTemplate 动态显示

    以下语句加在GridView.DataBind()之后: Table GridViewTable = ((Table)gvGridView.Controls[]); if (!isSearch) (( ...

  6. POJ 3714 Raid

    Description After successive failures in the battles against the Union, the Empire retreated to its ...

  7. usb驱动开发18之设备生命线

    现在已经使用GET_DESCRIPTOR请求取到了包含一个配置里所有相关描述符内容的一堆数据,这些数据是raw的,即原始的,所有数据不管是配置描述符.接口描述符还是端点描述符都挤在一起,所以得想办法将 ...

  8. Linux shell程序一

    设计一个Shell程序,在/$HONE/test目录下建立50个目录,即user1-user50, 并设置每个目录的权限,其中其他用户的权限为:读:文件所有者的权限为: 读.写.执行:文件所有者所在组 ...

  9. 基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)--AOP编程

    AOP编程在目前来说好像是大家都比较喜欢的.ASP.NET MVC中的Filter就是使用AOP实现的配置器模式.AOP在编码中的应用主要有如下几个方面: 日志记录,跟踪,优化和监控 事务的处理 持久 ...

  10. DOM 元素节点几何量与滚动几何量

    当在 Web 浏览器中查看 HTML 文档时,DOM 节点被解析,并被渲染成盒模型(如下图),有时我们需要知道一些信息,比如盒模型的大小,盒模型在浏览器中的位置等等,本文我们就来详细了解下元素节点的几 ...