datatable-固定行固定列

之前用fixed-table.js 寫了一個固定行，固定列的效果，缺點是 無法随着螢幕自适應寬度，是以被産品pass掉了，還是繼續看datatable的坑。

datatable這個是一個很強大的表格工具，之前隻有英文文檔，用于系統管理平台的開發有很大的用處，現在出了​​中文文檔​​，更友善了。

現在記錄一下實作步驟，友善以後繼續研究。

實作的效果圖，原理應該都是一樣的 三個表格，實作固定行，固定列，不過datatable 是一套配置，自動生成的。

1.資源：

css:

"stylesheet" type="text/css" href="assets/global/plugins/datatables/extensions/Scroller/css/dataTables.scroller.min.css" />
    <link rel="stylesheet" type="text/css" href="assets/global/plugins/datatables/extensions/ColReorder/css/dataTables.colReorder.min.css" />
    <link rel="stylesheet" type="text/css" href="assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"      

 js:

<script type="text/javascript" src="assets/global/plugins/datatables/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="assets/global/plugins/datatables/extensions/Scroller/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="assets/global/plugins/datatables/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" src="assets/global/plugins/datatables/extensions/ColReorder/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="assets/global/plugins/datatables/extensions/FixedColumns/js/dataTables.fixedColumns.min.js"></script>      

實作：

html:

js

'#sample_6').DataTable({
            //文案展示
            "language": {
                "sProcessing": "進行中...",
                "sLengthMenu": "顯示 _MENU_ 項結果",
                "sZeroRecords": "沒有比對結果",

                "sInfo": "",
                // "sInfo": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                "sInfoEmpty": "",
                "sInfoFiltered": "",
                "sInfoPostFix": "",
                "sSearch": "搜尋:",
                "sUrl": "",
                "sEmptyTable": "表中資料為空",
                "sLoadingRecords": "載入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首頁",
                    "sPrevious": "上頁",
                    "sNext": "下頁",
                    "sLast": "末頁"
                }
            },
            //ajax 請求接口
            "sAjaxSource": "json/data.json",
            // "sAjaxSource": "/join/GetListPage",
            //搜尋按鈕
            "searching": false,
            // "serverSide": true,
            "fnServerData": function (sSource, aoData, fnCallback) {
                //這個是點選 搜尋以後觸發的事件  重新掉了一次請求
                $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback
                })
            },
            "paging": false,
            // "paging": true,
            "lengthChange": false,
            "ordering": false,
            "iDisplayLength": 10,
            "info": true,
            "autoWidth": true,
            bStateSave: true,
            //橫向滾動
            sScrollX: "100%",
            //縱向高度 滾動
            sScrollY:'300',
            sScrollXInner: "110%",
            bScrollCollapse: false,
            fixedColumns: {
                //固定列的配置項
                leftColumns: -1,//-1第一列不固定，預設固定第一列
                rightColumns: 2 //固定右邊第一列
            },
            bDestory: true,
            bServerSide: true,

            "columns": [
                //data :Guestguid 對應的 資料的字段名
                { "data": "no", className: "text-center" },
                {"data": "Guestguid", className: "text-center"},
                { "data": "Type", className: "text-center", },
                { "data": "Contactname", className: "text-center", },

                { "data": "FullName", className: "text-center", },
                { "data": "Gender", className: "text-center", },
                { "data": "InvitationCompany", className: "text-center", },
                { "data": "WorldTop", className: "text-center", },
                { "data": "ChinaTop", className: "text-center", },

                { "data": "Country", className: "text-center", },
                { "data": "Industry", className: "text-center", },
                { "data": "Hierarchy", className: "text-center", },
                { "data": "Nationality", className: "text-center", },
                { "data": "Company", className: "text-center", },
                { "data": "Title", className: "text-center", },
                { "data": "Phone", className: "text-center", },
                {
                    "sClass": "text-center",
                    "data": "Institution",
                    "render": function (data, type, full, meta) {
                     
                        return '<input type="checkbox"  class="tablesingle" lay-ignore name="tablesingle"  value="" />'

                    },
                    "bSortable": false
                },
                {
                    "sClass": "text-center",
                    "data": "Contacttel",
                    "render": function (data, type, full, meta) {

                        return '<input type="checkbox"  class="tabledouble" lay-ignore name="tabledouble"  value="" />'

                    },
                    "bSortable": false
                },
            ],
        });      

View Code

json資料形式