thinkphp Integrated DataTables for service end paging (with code)

This time to bring you thinkphp integration DataTables implement service end paging (with code), thinkphp integration DataTables realize the service end paging attention to what, the following is the actual case, together to see.

There is a need to do something recently because of the large amount of data, where I decided to use DataTables's service-side paging, and also to pass the query condition to the server. Most of the articles searched on the internet feel a bit of error, so I encapsulated it, the main configuration/tools are:

Server: PHP (using thinkphp)

Page styles are from the H-ui framework (DataTables version 1.10.0)

The major modification (databases) configuration entries are:

1) bprocessing:true using AJAX sources

2) Serverside:true using service end paging

3) Createdrow:function () {} callback function for adding event or class name

4) Aocolumns for processing, displaying data, where the Render property is used for custom columns

The 1.datatables JS code is:

$ ('. Table-sort '). DataTable ({processing:true, serverside:true, Ajax: {"url": "{: U (' Msg/index ')}", "Data": function (    d) {//extra pass parameter D.mintime = $ (' #logmin '). Val ();   D.maxtime = $ (' #logmax '). Val (); }}, bstatesave:true,//state save Alengthmenu: [+, +, +,], bprocessing:true, Bautowidth:false, Bfilter: True,//whether to start filtering, search function binfo:true,//whether to display footer information, DataTables plug-in lower left corner shows the number of records 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) {RET    Urn ' <input type= ' checkbox "name=" select "value=" ' + Data + ' "/>"; }, "Bsortable": false}, {"Mdata": "id"}, {"Mdata": "Fromnickname"}, {"Mdata": "Content"}, {"Mdata": "M  Sgtype "}, {" 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 + ', ', ' 610 ')     "Class=" ml-5 "style=" Text-decoration:none "><i class=" Hui-iconfont "> View </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 "></i> delete </a>";    return HTML; }, "Bsortable": false}]});

2. Service side:

Controller: Receive parameters as follows: Draw    front End pass value, original value return, used to verify Mintime, maxtime custom parameter (time) search.value  datatables search box parameters, Used for query filtering Order.0.column  the cells to sort (starting with 0, the field needs to be set by itself) Order.0.dir   sort (ascending, descending) Start    start bar number (start of first) length    The query length returns the following data: Draw    Returns the value passed from the front end Recordstotal record total number of records  recordsfiltered  The total number of records after the condition has been filtered    data returns the data form of the database server query: Json

3. The complete code of the backend backend of the server 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: (* Where the DealTime method is mainly used for processing time periods)

Public Function GetData ($data) {//Get DataTables to send parameters necessary $draw = $data [' Draw '];//This value is returned directly to the foreground//Get time interval $timeArr [' mintime '] = $data [' Mintime ']; $TIMEARR [' maxtime '] = $data [' MaxTime ']; $where = $this->dealtime ($TIMEARR); Search box $search = Trim ($data [' Search '] [' value ']); Get filter conditions passed by the foreground if (strlen ($search) > 0) {$where [' id|fromnickname|content|msgtype '] = array (' Like ', '% '. $search. ' %'); }//define the total number of query data records SQL $recordsTotal = $this->count (); Define the number of records filtered by filter criteria query SQL $recordsFiltered = $this->where ($where)->count (); Sorting Criteria $orderArr = [1=> ' id ', 2=> ' fromnickname ', 3=> ' content ', 4=> ' msgtype ', 5=> ' time '; Gets the field to sort $orderField = (Empty ($orderArr [$data [' Order '] [' 0 '] [' column ']])? ' ID ': $ORDERARR [$data [' Order '] [' 0 '] [' column ']; Spaces are required to prevent strings from being concatenated $order = $orderField. ' '. $data [' Order '] [' 0 '] [' dir ']; Filter by condition to find records $result = []; Note: $data [' Start '] number of starting bars $data [' length '] query length $result = $this->field (' Id,fromnickname,content,msgtype,time ') where ($where)->order ($order)    ->limit (Intval ($data [' Start '), Intval ($data [' length ']))->select (); Processing 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; }}//Stitching the data to be returned $list = Array ("Draw" = + intval ($draw), "recordstotal" = Intval ($recordsTotal), "recordsfiltered" =>intval ($recordsFiltered), "data" = $result,); return $list;}

3) Implementation of custom Ajax search

1. Add onpicked callback function 2 in Wdatepicker. Executes Table.fnfilter (), where table is the DataTables object

Take the Wdatepicker plugin as an example (the input box is similar to the Bind 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. The Data property in the Ajax attribute in DataTables defines additional parameters to pass

Example:

Ajax: {  "url": "{: U (' Msg/index ')}",  "Data": function (d) {///extra pass parameter   d.mintime = $ (' #logmin '). Val ();   D.maxtime = $ (' #logmax '). Val ();  

4) Code:

A. html page

B.js part

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

What are the ways PHP implements multidimensional array sorting algorithms

PHP RSA encryption and decryption and development interface Case usage analysis