2019獨角獸企業重金招聘Python工程師標準>>>

官網：Datatables官網 中文網：Datatables中文網

我用過的一些配置：

var table=$('#tableId').dataTable({"destroy": true,//是否需要重復渲染表格，若是則true."data": data,//數據來源，data來自上文ajax請求回掉函數中的data或定義在本地的data//ajax與上句的data有任何一個就可以了"ajax":{//datatable中的ajaxasync: true,//同步false異步trueurl:simMonitor.domain+"sim/searchSimBindState",dataSrc://dataSrc相當于success，在datatable里面不能用success方法，會覆蓋datatable內部回調方法function(data){//data即服務器返回的數據return data;//自定義數據源，默認為data},type:"post",data:formData//ajax請求提交給服務器端的數據，一般是表單數據},"createdRow": function ( row, data, index ) {//該函數可對某指定行做操作，一般用于增加某種效果/* 設置表格中的內容居中 */$('td', row).attr("class","text-center");//所有行，text-center的屬性需自己在相關css中自己寫$('td:nth-child(3)', row).attr("class","textLeft");//第3列$('td:nth-child(10)', row).attr("class","textLeft");//第10列},"bStateSave": false,//狀態保存，使用了翻頁或者改變了每頁顯示數據數量，會保存在cookie中，下回訪問時會顯示上一次關閉頁面時的內容。這個數據是記錄在cookies中的，//打開了這個記錄后，即使刷新一次頁面，或重新打開瀏覽器，之前的狀態都是保存下來的，并且當值為true時aoColumnDefs不能隱藏列"ordering":false,//排序功能"bAutoWidth":false,//寬度自適應。一般禁止，使用不當容易造成報錯。（目前我還沒有使用過）"searching":false,//右上角搜索框的顯示與否"bLengthChange": true,//左上角改變每頁顯示數據數量的顯示與否"sScrollX":true,//x軸滾動條，若是此項設置導致thead與tbody有間隙，可設置margin消除或在table的html中設置width="100%" cellspacing="0""bInfo": true,//頁腳信息的顯示與否"bPaginate" : true,//翻頁功能的顯示與否"sCharSet":"utf-8",//設置編碼格式"deferRender": true,//當處理大數據時，延遲渲染數據，有效提高Datatables處理能力"oLanguage": {//設置語言"sLengthMenu": "每頁顯示 _MENU_ 條記錄","sZeroRecords": "抱歉， 沒有找到","sInfo": "從 _START_ 到 _END_ /共 _TOTAL_ 條數據","sInfoEmpty": "沒有數據","sInfoFiltered": "(從 _MAX_ 條數據中檢索)","oPaginate": {"sFirst": "首頁","sPrevious": "前一頁","sNext": "后一頁","sLast": "尾頁"},"sProcessing": true//"加載中...."的顯示與否},"columns":[//渲染列，一列一列將數據填充進去，thead中標識有多少列此處就寫多少列，并且將數據填充進去，數據來源于上文的data，函數中的row即data{"data":function(row){cellData=(row.operator == "" || row.operator == null) ? "--":row.operator;return cellData;},"type" : "string"}//其他列data省略....],"rowCallback": function( row, data ) {//行的回調函數$(row.cells[13]).click(function(){console.log(data);//每行的第13個子元素（列）被點擊之后，會打印出該行的所有值（不僅僅是顯示的，而是data返回給該行的所有數據）});}});

轉載于:https://my.oschina.net/AnymoreCoder/blog/801298

總結

以上是生活随笔為你收集整理的jQuery Datatables常用配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。