快捷導(dǎo)航

使用jquery DataTable和ajax向頁面顯示數(shù)據(jù)列表的方法

更新時間：2018年08月09日 09:25:54 作者：稻草一根

今天小編就為大家分享一篇使用jquery DataTable和ajax向頁面顯示數(shù)據(jù)列表的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

首先在html頁面定義好相關(guān)長度的行和列，假設(shè)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中定義了訪問后臺數(shù)據(jù)的url和訪問方式

colums定義的是返回來的數(shù)據(jù)類型，對應(yīng)著頁面當(dāng)中的各列，數(shù)量必須一致。

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

以上這篇使用jquery DataTable和ajax向頁面顯示數(shù)據(jù)列表的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: