ThinkPHP integrates datatables to implement sample code for server paging, thinkphpdatatables

ThinkPHP integrates datatables to implement sample code for server paging, thinkphpdatatables

There is a demand for doing something recently, because the data volume is large, here I decided to use the Ables Server Page, and also need to pass the query conditions to the server. Most of the articles searched on the Internet feel a bit wrong, so I encapsulated them myself. The main configuration/tool is:

Server: php (using thinkphp)

The page style is from the H-ui framework (the Ables version is 1.10.0)

The configuration items of databases are as follows:

1) bProcessing: true: Use ajax Source

2) serverSide: true: Use server pagination

3) createdRow: function () {} callback function, used to add an event or Class Name

4) aoColumns is used to process and display data. The render attribute is used to customize columns.

1. The js Code of datatables is:

$ ('. Table-sort '). dataTable ({processing: true, serverSide: true, ajax: {"url": "{: U ('msg/Index')}", "data": function (d) {// extra parameter d. mintime = $ ('# logmin '). val (); d. maxtime = $ ('# logmax '). val () ;}, bStateSave: true, // aLengthMenu: [20, 30, 50,100,150], bProcessing: true, bAutoWidth: false, bFilter: true, // whether to enable the filter and search functions bInfo: true, // whether to display the footer information. The number of records displayed in the lower left corner of the DataTables plug-in createdRow: function (row, data, index) {$ (row ). addClass ('text-C'); ('{count'{.html (data. recordsFiltered);}, aoColumns: [{"sClass": "text-center", "data": "id", "render": function (data, type, full, meta) {return '<input type = "checkbox" name = "select" value = "' + data + '"/>' ;}, "bSortable": false }, {"mData": "id" },{ "mData": "fromnickname" },{ "mData": "content" },{ "mData": "msgtype "}, {"mData": "time" },{ "sClass": "text-center", "data": "id", "render": function (data, type, full, meta) {html = '<a title = "View" href = "javascript :; "rel =" external nofollow "rel =" external nofollow "onclick =" show ('view', '_ URL _/show/id/' + data + '', '', '000000')" class = "ml-5" style = "text-decoration: none "> <I class =" Hui-iconfont "> View tags </I> </a> '; html + =' <a style =" text-decoration: none "class =" ml-5 "onClick =" signDel (this, '+ data +') "href =" javascript :; "rel =" external nofollow "rel =" external nofollow "title =" delete "> <I class =" Hui-iconfont "> deleted </I> </a>'; return html ;}, "bSortable": false}]});

2. Server:

Controller: The receiving parameter is as follows: the value passed by the draw front end. The original value is returned. It is used to verify the mintime and maxtime custom parameters (time) search. value datatables search box parameter, used to query and filter the cells to be sorted by order.0.column (from 0, the field needs to be set by yourself) order.0.dir sorting (ascending and descending) the data returned by the length query for the start entry (the number of start entries) is as follows: draw returns the total record count of the value recordsTotal passed by the front end recordsFiltered condition. The total number of records after the recordsFiltered condition is filtered. The data queried by the data server returns the data in the form of json.

3. Complete server backend code is as follows:

1) controller code:

public function index(){ if(IS_AJAX){  $list = D('Msg')->getData(I('get.'));  $this->ajaxReturn($list); } $this->display();}

2) Model-Layer Code: (* The dealTime method is mainly used for processing time periods)

Public function getData ($ data) {// required to obtain the parameters sent by Datatables $ draw = $ data ['draw']; // This value is directly returned to the foreground // get the time range $ timeArr ['mintime'] = $ data ['mintime']; $ timeArr ['maxtime'] = $ data ['maxtime']; $ where = $ this-> dealTime ($ timeArr ); // search box $ search = trim ($ data ['search'] ['value']); // obtain the filter condition if (strlen ($ search)> 0) {$ where ['id | fromnickname | content | msgtype '] = array ('like',' % '. $ search. '%');} // defines the total number of data records queried. SQL $ re CordsTotal = $ this-> count (); // defines the number of records after the filter condition query. SQL $ recordsFiltered = $ this-> where ($ where)-> count (); // sorting condition $ orderArr = [1 => 'id', 2 => 'fromnickname', 3 => 'content', 4 => 'msgtype ', 5 => 'time']; // obtain the field to be sorted $ orderField = (empty ($ orderArr [$ data ['order'] ['0'] ['column'])? 'Id': $ orderArr [$ data ['order'] ['0'] ['column ']; // a space is required, prevents strings from being connected to a block $ order = $ orderField. ''. $ data ['order'] ['0'] ['dir']; // filter records by condition. $ result = []; // note: $ data ['start'] start number $ data ['length'] query length $ result = $ this-> field ('Id, fromnickname, content, msgtype, Time ') -> where ($ where)-> order ($ order)-> limit (intval ($ data ['start']), intval ($ data ['length']) -> select (); // process data if (! Empty ($ result) {foreach ($ result as $ key => $ value) {$ result [$ key] ['time'] = date ("Y-m-d H: I: s", $ value ['time']); $ result [$ key] ['recordsfiltered'] = $ recordsFiltered;} // splice the data to be returned $ list = array ("draw" => intval ($ draw ), "recordsTotal" => intval ($ recordsTotal), "recordsFiltered" => intval ($ recordsFiltered), "data" =>$ result,); return $ list ;}

3) Implement custom ajax search

1. Add the onpicked callback function in WdatePicker. 2. Execute table. fnFilter (), where table is the datatables object.

Take the WdatePicker plug-in as an example (the input box is similar, bind the onchange event ):

<input type="text" onfocus="WdatePicker({maxDate:'#F{ $dp.$D(\'logmax\')||\'%y-%M-%d\'}', onpicked:function(){table.fnFilter();}})" name="mintime" id="logmin" class="input-text Wdate" style="width:120px;">

3. define additional parameters for the data attribute in the ajax attribute of datatables

Example:

Ajax: {"url": "{: U ('msg/Index')}", "data": function (d) {// additional parameter d. mintime = $ ('# logmin '). val (); d. maxtime = $ ('# logmax '). val ();}

4) code:

A. html page

 

B. js

 

The sample code of the above ThinkPHP integration datatables to implement server paging is all the content shared by the editor. I hope you can provide a reference and support for the customer's house.