现在有很多表格渲染方式 这里只是记录怎么使用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. css多栏自适应布局

    css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...

  2. Beanstalk消息队列的实现

    在工作中要用到消息队列,但是主管为了追求开发速度,让用了一个简易的类  beanstalk 下面来说明这个东西 参考博客:https://my.oschina.net/u/698121/blog/15 ...

  3. Stunnel服务端

    Stunnel on Debian GNU/Linux 6 (squeeze) 传统的POP3, SMTP, Samba等服务,都是不加密的协议(即在网络上明文传输数据),通过stunnel,可以将访 ...

  4. java 23 - 2 设计模式之单例模式

    单例模式:保证类在内存中只有一个对象. 如何保证类在内存中只有一个对象呢?  A:把构造方法私有  B:在成员位置自己创建一个对象  C:通过一个公共的方法提供访问 单例模式之饿汉式: (一进来就造对 ...

  5. android系统架构解析

    以上是我在这个课题下的一些参考博客或者网页链接.里面有对于android架构的一些较好的分析理解,接下来是楼主在阅读后自己的一些整理. Android采用层次化系统架构,官方公布的标准架构如下图所示. ...

  6. 持久化存储——偏好设置,plist,归档---学习笔记二

    //一. 本地持久化 //1.沙盒 //1.1 应用程序包:存放的是应用程序的源文件,包括资源文件和可执行文件 NSString *path = [[NSBundle mainBundle]bundl ...

  7. 判断一个变量的类型Object.prototype.toString.call

    var num = 1;alert(Object.prototype.toString.call(num)); // [object Number]var str = 'hudidit.com';al ...

  8. java.sql.preparedstatement和java.sql.statement的区别

    本文转自CSDN,然后整理了一遍.原文出处:CSDN JDBC(java database connectivity,java数据库连接)的api中的主要的四个类之一的java.sql.stateme ...

  9. vs2015企业版太大了

    安装教程 http://www.cnblogs.com/mephisto/archive/2015/07/22/4666032.html#!comments 新功能 http://news.cnblo ...

  10. AngularJS+Node的RESTful之基本实现

    欢迎大家指导与讨论 : ) 一.前言 本文主要讲述RESTful在node端与AngularJS两端配合的基本实现方法,为了尽量做到大家易看易懂,因此文章也没有深入探讨(其实是小鹏我只学到目前这些 - ...