现在有很多表格渲染方式 这里只是记录怎么使用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);