黑馬在線教育項(xiàng)目---15-16、datatables插件

一、總結(jié)

一句話總結(jié)：

datatables插件也比較好用，引入好插件的js和css后，核心代碼也就是插件的初始化，如果要修改配置可以百度

?

1、datatables插件的兩種形式？

客戶端分頁方式、服務(wù)端分頁方式（limit），區(qū)別在于前者是一次性從服務(wù)端獲取數(shù)據(jù)

客戶端分頁：優(yōu)點(diǎn)是當(dāng)數(shù)據(jù)量少的時(shí)候，其速度是比較快的，其所有的操作都在客戶端完成；但是如果數(shù)據(jù)量大的話，則加載的時(shí)候會(huì)很慢。

服務(wù)端分頁：優(yōu)點(diǎn)是當(dāng)數(shù)據(jù)量大的時(shí)候，由于每次都是通過limit限制輸出記錄，所以其速度基本不受影響；但是如果數(shù)據(jù)量少的時(shí)候則服務(wù)器的壓力相對較大。

后期在做datatables分頁的時(shí)候可以根據(jù)數(shù)據(jù)量來選擇是使用客戶端還是服務(wù)端分頁。

?

2、datatables插件核心操作？

初始化DT插件：$(選擇器).dataTable(); 就這一句

?

?

二、使用datatables插件實(shí)現(xiàn)列表的無刷新分頁

Datatables插件是一款基于jQuery框架進(jìn)行開發(fā)的無刷新分頁插件，其除了分頁還有排序、搜索等功能。

官網(wǎng)：https://www.datatables.net/

該分頁插件有2種形式：客戶端分頁方式、服務(wù)端分頁方式（limit）

?

?

客戶端分頁：優(yōu)點(diǎn)是當(dāng)數(shù)據(jù)量少的時(shí)候，其速度是比較快的，其所有的操作都在客戶端完成；但是如果數(shù)據(jù)量大的話，則加載的時(shí)候會(huì)很慢。

服務(wù)端分頁：優(yōu)點(diǎn)是當(dāng)數(shù)據(jù)量大的時(shí)候，由于每次都是通過limit限制輸出記錄，所以其速度基本不受影響；但是如果數(shù)據(jù)量少的時(shí)候則服務(wù)器的壓力相對較大。

?

后期在做datatables分頁的時(shí)候可以根據(jù)數(shù)據(jù)量來選擇是使用客戶端還是服務(wù)端分頁。

?

2.1、使用客戶端分頁方式實(shí)現(xiàn)分頁

使用步驟：

???????? ①先在確保引入jQuery之后，再去引入datatables的JavaScript文件；

???????? ②需要初始化datatables插件

???????? ③【可選】databtables支持一些擴(kuò)展的配置

?

①引入對應(yīng)的文件

?

?

?

②初始化DT插件

語法：$(選擇器).dataTable();

?

?

?

③【可選】針對當(dāng)前的情況來進(jìn)行一些配置

a. 禁用掉第一列（復(fù)選框）排序

b. 更改默認(rèn)的初始化排序操作

?

?

?

提示：后期需要用到這些配置項(xiàng)代碼，不建議去記憶，用的時(shí)候直接百度搜索即可。

?

實(shí)現(xiàn)效果：

?

?

?

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/Renyi-Fan/p/11610538.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的黑马在线教育项目---15-16、datatables插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。