【平常筆記】datatables表格數據渲染

 

如今有不少表格渲染方式 這裏只是記錄怎麼使用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);