首先在html頁面定義好相關長度的行和列，假設table的id=data-table“”

使用jquery DataTable在js中這么寫

$(function() {	$('#data-table').DataTable(			{				order : [ [ 1, 'desc' ] ],				ajax : {					url : "/products",					type : 'GET',					dataSrc : ""				},				columns : [ {					data : "id"				}, {					data : "id"				}, {					data : "title",					defaultContent : ""				}, {					data : "sell_point",					defaultContent : ""				}, {					data : "price",					defaultContent : ""				},{					data : "number",					defaultContent : ""				},{					data : "image",					defaultContent : ""				},{					data : "cid",					defaultContent : ""				},{					data : "id"				}],				columnDefs : [{					targets : [ 0 ],					orderable : false,					render : function(id, type, row, meta) {						return '<input id="input-' + id								+ '" type="checkbox" name="ids" value=' + id								+ '><label for="input-' + id + '"></label>';					}				},{					targets: [8],					render: function(data, type, row, meta) {						return '<a title="編輯" href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="product_edit('+ data +')" style="text-decoration:none"><i class="Hui-iconfont"></i></a><a title="刪除" href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="product_del(' + data +')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a>'					}				}]			});});

其中ajax中定義了訪問后臺數據的url和訪問方式

colums定義的是返回來的數據類型，對應著頁面當中的各列，數量必須一致。

columnDefs中targets是為某一列綁定一個回調函數，比如第一列是id值，但是不想顯示id值，那么targets就是[0]代表第一項，為它返回了一串html代碼并將id值加入其中，便于后續的操作。

以上這篇使用jquery DataTable和ajax向頁面顯示數據列表的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。