【日常笔记】datatables表格数据渲染

 

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

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

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

事件api文档：http://datatables.club/reference/option/

在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);