溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
首先在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 +')" ><i class="Hui-iconfont"></i></a><a title="刪除" href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="product_del(' + data +')" class="ml-5" ><i class="Hui-iconfont"></i></a>'
}
}]
});
});
其中ajax中定義了訪問后臺數據的url和訪問方式
colums定義的是返回來的數據類型，對應著頁面當中的各列，數量必須一致。
columnDefs中targets是為某一列綁定一個回調函數，比如第一列是id值，但是不想顯示id值，那么targets就是[0]代表第一項，為它返回了一串html代碼并將id值加入其中，便于后續的操作。
以上這篇使用jquery DataTable和ajax向頁面顯示數據列表的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
