datatables基本使用(含固定列,導出)

因工作需要,做一個統計列表,要實現表頭固定,可以通過點擊表頭進行排序,還有內容導出;

本來是考慮用layui 的table,但是系統裏用了require.js ,在用layui感覺有點重複,所以採用了datatables。

主要優點:功能強大,可選擇擴展功能也算全面了。

基本用法:

$("#table").dataTable({
                "searching": false,//不要搜索框
                "paging": false, //不要分頁
                "scrollX": 500,//固定寬度,水平滾動
                "scrollY": 380,//固定高度 ,垂直滾動
                "serverSide": false,//不開啓服務器模式
                "processing":true,
                "autoWidth": true, //隨內容自動計算列寬
                "columns": [
                    {
                        title: "序號",
                        render: function (data, type, row, meta) {
                            return meta.row + 1 + meta.settings._iDisplayStart
                        }, width: "50", "orderable": false //禁止排序
                    },
                    {title: "項目名稱", "data": "name"},
                    {
                        title: "項目編碼", "data": "code", render: function (data, type, row, meta) {
                            // row 行數據
                            if (data) return data;
                            else return "";
                        }
                    },
                ],
                fixedColumns: {
                    leftColumns: 2 // 固定左邊兩列
                },
                buttons:[  {extend: 'excel',
                            className: 'btn-export',
                            text: '導出',
                            filename: '項目彙總表',
                            title: '項目彙總表'} ],
                language: {
                    "info": "總記錄數爲_TOTAL_條",
                    "loadingRecords": "請等待,數據正在加載中......",
                    "emptyTable": "暫無查到相關記錄"
                },
                ajax: {
                    url:'project/getList.do',
                    "dataSrc": function ( json ) {
                        if(json.code==200){
                            return json.data;
                        }else{
                            return [];
                        }
                    }
                }
            });

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章