JQuery DataTables User Manual (Lite version)

Reprint Please specify source: http://www.cnblogs.com/shamoyuu/p/5182940.html

First, Common properties

//Put public settings here, you don't need to set each page again, on jquery objects to avoid polluting global variables
$.datatablessettings ={processing:false,//whether to show prompt in loadBautowidth:false,//whether the table column widths are automatically calculatedBpaginate:true,//whether to show the use of pagingBinfo:false,//whether to display page information     spaginationtype: "Full_numbers",//pagination style     idisplaylength:10,//How many records per page are displayed by defaultSearching:false,//whether to display the search boxBsort:false,//whether to allow sortingServerSide:true,//whether to get data from the serverBstatesave:true,//keep current page after page reloadBlengthchange:false,//whether to display a drop-down box for each page sizeSservermethod: "POST", language: {lengthmenu:"Show _menu_ records per page", Zerorecords:"No matching data", Info:"Page _page_/Total _pages_ page", Infoempty:"There are no records that match the criteria", search:Find, infofiltered:"(Filtered from _max_ Records)", paginate: {"First": "Home", "last": "End", "Next": "Next Page", "Previous": "Prev"}    },
    //This is to add custom parameters for Ajax Fnserverparams:function(aodata) {Aodata._rand=Math.random (); }};

after referencing the JS file above, set other parameters here
URL of//ajax
$.datatablessettings.ajax = "/backend/content/load";
//If the height of the table is greater than this value, the tbody will appear with a scrollbar, and the table header is fixed $.datatablessettings.sscrolly= $ (window). Height ()-300;//whether to turn on vertical scrolling (no =disabled)
//Set specific column names$.datatablessettings.columns =[{data:"id"}, {data:"Title"}, {data:"Sort"}, {data:"Diffcity"}, {data:"Citys"}, {data:"EditTime"}, {data:"Editer"}];
//operation on the column, here just replace the first column $.datatablessettings.columndefs=[{targets: [0], data:"id", Render:function(data, type, row) {return"<a title= ' edit ' class= ' Glyphicon glyphicon-edit nounderline ' href= ' javascript:edittabrow (" + Data + "); '  ></a>&nbsp; " + "<a title= ' copy ' class= ' Glyphicon glyphicon-duplicate nounderline ' href= ' javascript:copytabrow (" + Data + "); ></a>&nbsp; "+" <a title= ' delete ' class= ' Glyphicon glyphicon-trash nounderline ' href= ' javascript :d Eletetabrow ("+ Data +"); ' ></a> "; }}];

II. Events

function (data) {    //each time the table is   drawn, call function() {    //table is initialized once  };
There are other infrequently used, do not list

Third, the method

//Redraw method. True returns to the initial state of the table, such as returning to the first page, false simply reloading the current page Datatable.fndraw (false); //Destroy method. True removes the table element, and False does not, it simply destroys the DataTable object Datatable.fndestroy (false); //Page break method, you can jump to the specified page. The optional parameters are "first", "previous", "Next", "last", or an integer, and 0 is page datatable.fnpagechange (0);

Iv. Search Cases

//This is a search case, but custom paging can do the same
$ ("#searchBtn"). On ("click",function(){
    //This is to solve the changes in the search conditions, there is no point search button, but the point of the page after the search condition also changed the bug    varStitle = $ ("#stitle"). Val (); varSdiffcity = $ ("#sdiffcity"). Val (); varScity = $ ("#scity"). Val ();
    Reset the parameters here
$.datatablessettings.fnserverparams=function(aodata) {Aodata.stitle=Stitle; Aodata.sdiffcity=sdiffcity; Aodata.scity=scity; Aodata._rand=Math.random (); }    //the search is to set the parameters, and then destroy the DataTable to re-build aDatatable.fndestroy (false); DataTable= $ ("#datatable"). dataTable ($.datatablessettings);
   //Search after jump to the first page Datatable.fnpagechange (0);});

Five, matters needing attention

 //  when the window size changes, To solve the problem of not automatically adapting the DataTable header to  $ (window). Resize (function   () {dataTable  && datatable.fndraw (  

In the success method of the removed Ajax need to write, if the current page has only one piece of data, delete and jump to the previous page
Start = $ ("#datatable"= $ ("#datatable"). DataTable (). Fnsettings (). Fnrecordsdisplay ();d Atatable.fndraw (false); if ((total-start) = = 1)    {if (Start > 0)        {$ (true);    }}

JQuery DataTables User Manual (Lite version)