使用datatables實現后台分頁功能,減輕前端渲染壓力


注意不同版本,參數名字及參數內容存在差異,具體可以參考https://datatables.net/upgrade/1.10-convert#Options

 

控制頁面顯示的參數:https://datatables.net/reference/option/

 

前端傳給后端的參數列表:

后端傳給前端的參數列表:

 

修改搜索觸發方式(原來的觸發方式為keyup,修改為回車觸發):http://blog.csdn.net/u012088516/article/details/52423248

增加前端傳給后端的參數:http://www.datatables.club/manual/daily/2016/04/21/option-ajax-data.html

 

前端傳給后端的默認參數列表:

draw: 1
columns[0][data]: 0
columns[0][name]: 
columns[0][searchable]: true
columns[0][orderable]: false
columns[0][search][value]: 
columns[0][search][regex]: false
columns[1][data]: 1
columns[1][name]: 
columns[1][searchable]: true
columns[1][orderable]: false
columns[1][search][value]: 
columns[1][search][regex]: false
columns[2][data]: 2
columns[2][name]: 
columns[2][searchable]: true
columns[2][orderable]: false
columns[2][search][value]: 
columns[2][search][regex]: false
columns[3][data]: 3
columns[3][name]: 
columns[3][searchable]: true
columns[3][orderable]: false
columns[3][search][value]: 
columns[3][search][regex]: false
columns[4][data]: 4
columns[4][name]: 
columns[4][searchable]: true
columns[4][orderable]: false
columns[4][search][value]: 
columns[4][search][regex]: false
columns[5][data]: 5
columns[5][name]: 
columns[5][searchable]: true
columns[5][orderable]: false
columns[5][search][value]: 
columns[5][search][regex]: false
columns[6][data]: 6
columns[6][name]: 
columns[6][searchable]: true
columns[6][orderable]: false
columns[6][search][value]: 
columns[6][search][regex]: false
start: 0
length: 10
search[value]: 
search[regex]: false

 

參考:

https://datatables.net/manual/server-side#Example-data

http://datatables.club

http://blog.csdn.net/u010403387/article/details/46355533


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM