datatable-固定行固定列

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

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

現在記錄一下實現步驟，方便以后繼續研究。

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

 

 

1.資源：

css:

    <link rel="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
                },
            ],
        });

 

json數據形式

 

 

這樣就生成一個 不帶分頁的 自適應，固定列的表格了