天天看點

JQuery Tables 的應用(一)

具體檢視參考文檔 https://datatables.net/examples/index 其他參看: https://www.cnblogs.com/amoniyibeizi/p/4548111.html 例子如下:

jQuery(function ($) {
            //initiate dataTables plugin
            var myTable =
                $('#dynamic-table')
                    //.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
                    .DataTable({
                       "bPaginate": true,  //是否顯示分頁
                "bLengthChange": true,  //每行顯示的記錄數
                "bFilter": true, //搜尋欄
                "bSort": true, //是否支援排序功能
                "bInfo": true, //顯示表格資訊
                "bAutoWidth": false,  //自适應寬度
                "aaSorting": [[1, "asc"]],  //給清單排序 ,第一個參數表示數組 (由0開始)。1 表示Browser列。第二個參數為 desc或是asc
                        "aoColumns": [//不排序與排序顔色不同
                            { "bSortable": false },
                            null,
                            null,
                            null,
                            null,
                            null,
                            { "bSortable": false },
                            {
                                "bSortable": false,
                                "bVisible": true, //不可見
                                "bSearchable": false, //參與搜尋
                            },
                            {
                                "bSortable": false,
                                "bVisible": true, //不可見
                                "bSearchable": false, //參與搜尋
                            },
                            {
                                "bSortable": false,
                                "bVisible": true, //不可見
                                "bSearchable": false, //參與搜尋
                            },
                            {
                                "bSortable": false,
                                "bVisible": true, //不可見
                                "bSearchable": false, //參與搜尋
                            },
                            {
                                "bSortable": false,
                                "bVisible": true, //不可見
                                "bSearchable": false, //參與搜尋
                            }
                        ],
                        //"bProcessing": true,
                        //"bServerSide": true,
                        //"sAjaxSource": "http://127.0.0.1/table.php"	,

                        //,
                        //"sScrollY": "200px",
                        //"bPaginate": false,

                        //"sScrollX": "100%",
                        //"sScrollXInner": "120%",
                        //"bScrollCollapse": true,
                        //Note: if you are applying horizontal scrolling (sScrollX) on a ".table-bordered"
                        //you may want to wrap the table inside a "div.dataTables_borderWrap" element

                        //"iDisplayLength": 50,
 "bStateSave": true, //儲存狀态到cookie *************** 很重要 , 當搜尋的時候頁面一重新整理會導緻搜尋的消失。使用這個屬性就可避免了
                "sPaginationType": "full_numbers", //分頁,一共兩種樣式,full_numbers和two_button(預設)
                        select: {
                            style: 'multi'
                        },
                        "aaSorting": [],
                        "oLanguage": {
                            "sEmptyTable": "對不起,表中沒有資料。",
                            "sInfo": "目前顯示 _START_ 到 _END_ 條,共 _TOTAL_ 條記錄",
                            "sInfoEmtpy": "找不到相關資料",
                            "sInfoFiltered": "(從 _MAX_ 條記錄中過濾)",
                            "sInfoPostFix": " ",
                            "sInfoThousands": ",",//千位分隔符
                            "sLengthMenu": "每頁顯示 _MENU_ 條記錄",
                            "sLoadingRecords": "載入中...",
                            "sProcessing": "正在加載中...",
                            "sSearch": "搜尋:",
                            "sZeroRecords": "對不起,搜尋不到任何相關資料。",
                            "oPaginate": {
                                "sFirst": "第一頁",
                                "sPrevious": " 上一頁 ",
                                "sNext": " 下一頁 ",
                                "sLast": " 最後一頁 "
                            },
                            "oAria": {
                                "sSortAscending": "可以按升序對列進行排序",
                                "sSortDescending": "可以按降序對列進行排序"
                            }//,
                            //"sUrl": "", //多語言配置檔案,可将oLanguage的設定放在一個txt檔案中,例:Javascript/datatable/dtCH.txt
                        }
                    });           

繼續閱讀