datatables非同步AJAX的簡易用法

2022-03-23 06:36:59 字數 2539 閱讀 1750

datatables對**資料處理非常方便,但是有時將大量資料直接載入到前端頁面就會造成頁面訪問十分不流暢,所以可以考慮使用非同步載入資料。

這個在官網也有詳細的說明:戳這

datatables ajax請求後端資料非常簡單,只要在初始化時設定serverside: true即開啟後端處理資料。

如下是初始化datatables的**:

1

var datatables = $("#table_id").datatable(

17},

18//

告訴datatables資料中對應的列

19columns: [

20 ,

21

22],

23 paging: true,//

開啟分頁

24 ordering: true,//

開啟排序

25 searching: true,//

開啟搜尋

26 idisplaylength : 50,//

預設長度

27 language: lang //

語言 這裡我把提出來了,在最下面完整**

28   });

現在你的前端**只要有資料請求就會向你的url發出請求,下圖是後端接收的請求引數:

後端根據前端的要求去資料庫中得到資料,這裡要注意的是你不能完全相信前端傳來的值,比如使用者在搜尋中輸入一條sql語句到後端,然後你直接把使用者搜尋的值合成一條sql去執行,這樣就會產生意想不到的事情。

,

],"status": true

, "recordstotal": 100000,

"recordsfiltered": 100000}

recordstotal是資料的總條數,recordsfiltered是資料過濾後的條數,data是實際的返回資料。如果你的json欄位需要改變在初始化時將你的設定傳入建構函式即可。

條件搜尋

當然有時候你需要根據一些條件來搜尋,比如搜尋乙個時間範圍或者乙個什麼使用者輸入的條件。

你只需要將要搜尋的值傳入並觸發搜尋就可以了。

例如下面**是點選了按鈕後,將使用者要搜尋的值傳到後端。

1         $('#submit').on('click',function

() );

延時搜尋一般這樣datatables簡單的ajax請求就完成了,但是要注意的是這樣的方法前端每次改變都會觸發後端查詢資料庫,會增加後端伺服器的壓力

你也可以在初始化時設定:searchdelay: 400這個意思是每次使用者在搜尋框中輸入後延時400ms後再去請求後端從而降低伺服器壓力,預設即為400ms。

例子

下面是完整的初始化部分**:

1

var lang =,

17 zerorecords: "沒有內容",

18 info: "總共_pages_ 頁,顯示第_start_ 到第 _end_ ,篩選之後得到 _total_ 條,初始_max_ 條 ",

19 infoempty: "0條記錄",

20};

2122 $(function

() 39

},40

//告訴datatables資料中對應的列

41columns: [

42 ,

43

44],

45 paging: true,//

開啟分頁

46 ordering: true,//

開啟排序

47 searching: true,//

開啟搜尋

48 idisplaylength : 50,//

預設長度

49 language: lang //

語言50

});51

5253 $('#submit').on('click',function

() );

5859 });

DataTables 用法積累

function loaddata datasrc function json return false return json.data fndrawcallback function osettings columndefs searchgo function currentpagerefres...

如何使用dataTables

基本上三個步驟 第乙個步驟就是匯入datatables的框架 第二個步驟就是按照datatables框架的將自己寫的table加上id code name price 001shoes 2323 002bags 4612 003clothes 4612 004computer 4612 005key...

DataTables學習筆記 一

使用datatables時,在搜尋框輸入值進行搜尋後報出以下warning datatables warning table id table4 requested unknown parameter 4 for row 0.for more information about this error...