jQuery+datatables插件實(shí)現(xiàn)ajax加載數(shù)據(jù)與增刪改查功能示例
更新時間：2018年04月17日 11:08:35 作者：包子源
這篇文章主要介紹了jQuery+datatables插件實(shí)現(xiàn)ajax加載數(shù)據(jù)與增刪改查功能,涉及jQuery結(jié)合datatables插件針對頁面表格實(shí)現(xiàn)數(shù)據(jù)加載及增刪改查等相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery+datatables插件實(shí)現(xiàn)ajax加載數(shù)據(jù)與增刪改查功能。分享給大家供大家參考，具體如下：
這里給大家分享一下我在項(xiàng)目中用datatables實(shí)現(xiàn)ajax加載數(shù)據(jù)與增刪改查
注意，需要引入jquery、datatables、layer
html代碼：
<div class="thead">
<input placeholder="請輸入搜索內(nèi)容" id="searchTitle" type="text"/>
<button id="search" class="layui-btn layui-btn-small layui-btn-primary"><i class="layui-icon"></i> 搜索</button>
<button id="add" class="layui-btn layui-btn-small layui-btn-primary"><i class="layui-icon"></i> 新增</button>
<button id="change" class="layui-btn layui-btn-small layui-btn-primary"><i class="layui-icon"></i> 編輯</button>
<button id="del" class="layui-btn layui-btn-small layui-btn-primary"><i class="layui-icon"></i> 刪除</button>
</div>
<table id="table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>職業(yè)</th>
<th>姓名</th>
<th>性別</th>
<th>愛好</th>
</tr>
</thead>
</table>
js代碼：
//點(diǎn)擊查找
$("#search").click(function () {
table.ajax.reload();
});
//初始化datatables
var table = $('#example').DataTable({
"searching": false,
"serverSide": true,
"bProcessing": true,
"bPaginate": true, //翻頁功能
"bLengthChange": true, //改變每頁顯示數(shù)據(jù)數(shù)量
"bFilter": true, //過濾功能
"bSort": false, //排序功能
"sPaginationType": "full_numbers",
"fnServerData": function (sSource, aoData, fnCallback) {
var json = {
"page": {
"start": aoData[3].value,
"length": aoData[4].value,
},
"search": {
"xb": $("#searchTitle").val()
}
};
$.ajax({
"dataType": 'json',
"type": "POST",
"url": server + "user/queryUser.do",
"contentType": "application/json; charset=utf-8",
"data": JSON.stringify(json),
"success": function (data) {
data.recordsTotal = data.page.recordsTotal;
data.recordsFiltered = data.page.recordsTotal;
fnCallback(data);
}
});
},
"oLanguage": {
"sLengthMenu": "每頁顯示 _MENU_ 條記錄",
"sZeroRecords": "抱歉， 沒有找到",
"sInfoEmpty": "沒有數(shù)據(jù)",
"sInfoFiltered": "(從 _MAX_ 條數(shù)據(jù)中檢索)",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "前一頁",
"sNext": "后一頁",
"sLast": "尾頁"
},
"sZeroRecords": "沒有檢索到數(shù)據(jù)",
},
"aoColumns": [
{"data": "zy"},
{"data": "xm"},
{"data": "xb"},
{"data": "fov"}
]
});
///////////////////////////////////////////////////////////////////////////////
//增加
$("#add").click(function () {
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上邊框
area: ['420px', '240px'], //寬高
btn: ['確定'],
yes: function (index, layero) {
var json = {
"zy": $("#zhiy").val(),
"xm": $("#name").val(),
"xb": $("#sex").val(),
"fov_ck": $("#aihao").val()
};
$.ajax({
type: "POST",
url: server + "user/addUser.do",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(json),
dataType: "json",
success: function (data) {
if (data.success == true) {
layer.msg(data.msg);
} else if (data.success == false) {
layer.msg(data.msg);
}
}
});
layer.close(index);
table.ajax.reload();
},
content: '職業(yè)：' + '<input type="text" name="" id="zhiy" value=""/>' + '<br>姓名：'
+ '<input type="text" name="" id="name" value=""/>' + '<br>性別：'
+ '<input type="text" name="" id="sex" value=""/>' + '<br>愛好：'
+ '<input type="text" name="" id="aihao" value=""/>'
});
});
//選中一行觸發(fā)
$('#example tbody').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
adatid = "";
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
adatid = table.row(this).data().guid;
adata = table.row(this).data().zy;
bdata = table.row(this).data().xm;
cdata = table.row(this).data().xb;
ddata = table.row(this).data().fov;
}
});
////////////////////////////////////////////////////////////////////////////////////////
//修改
$("#change").click(function () {
if (adatid === '') {
alert("請選中要修改的數(shù)據(jù)");
} else {
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上邊框
area: ['420px', '240px'], //寬高
btn: ['確定'],
yes: function (index, layero) {
var json = {
"guid": adatid,
"zy": $("#cid").val(),
"xm": $("#cname").val(),
"xb": $("#csex").val(),
"fov_ck": $("#cage").val()
};
$.ajax({
type: "POST",
url: server + "user/updateUser.do",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(json),
dataType: "json",
success: function (data) {
if (data.success == true) {
layer.msg(data.msg);
} else if (data.success == false) {
layer.msg(data.msg);
}
}
});
layer.close(index);
table.ajax.reload();
},
content: '職業(yè)：' + '<input type="text" name="" id="cid"/>' + '<br>姓名：'
+ '<input type="text" name="" id="cname"/>' + '<br>性別：'
+ '<input type="text" name="" id="csex"/>' + '<br>愛好：'
+ '<input type="text" name="" id="cage"/>'
});
}
$("#cid").val(adata);
$("#cname").val(bdata);
$("#csex").val(cdata);
$("#cage").val(ddata);
});
////////////////////////////////////////////////////////////////////////////////
//刪除
$("#del").click(function () {
if (adatid === '') {
alert("請刪除要修改的數(shù)據(jù)");
} else {
var json = {
"guid": adatid
};
$.ajax({
type: "POST",
url: server + "user/deleteUser.do",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(json),
dataType: "json",
success: function (data) {
if (data.success == true) {
layer.msg(data.msg);
} else if (data.success == false) {
layer.msg(data.msg);
}
}
});
table.ajax.reload();
}
});
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jquery實(shí)現(xiàn)文字由下到上循環(huán)滾動的實(shí)例代碼
這篇文章介紹了jquery實(shí)現(xiàn)文字由下到上循環(huán)滾動的實(shí)例代碼，有需要的朋友可以參考一下2013-08-08
在QWrap群里討論時，有同學(xué)問jquery/yui等已做到極致，我們有沒必要再重復(fù)造一個叫QWrap的輪子？2011-02-02
jQuery控制div實(shí)現(xiàn)隨滾動條滾動效果
這篇文章主要介紹了jQuery控制div實(shí)現(xiàn)隨滾動條滾動效果,對比分析了兩種實(shí)現(xiàn)方法供大家參考選擇,需要的朋友可以參考下2016-06-06
如何使用jquery easyui創(chuàng)建標(biāo)簽組件
這篇文章主要介紹了如何使用jquery easyui創(chuàng)建標(biāo)簽組件的相關(guān)資料,需要的朋友可以參考下2015-11-11
Jquery EasyUI Datagrid右鍵菜單實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Jquery EasyUI Datagrid右鍵菜單的實(shí)現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
基于jQuery的前端數(shù)據(jù)通用驗(yàn)證庫
做了這么長時間的開發(fā)，一直因?yàn)轵?yàn)證的問題相當(dāng)?shù)目鄲?，不斷的寫很多重?fù)的代碼，對想偷懶的我來說是相當(dāng)痛苦的。2011-08-08
jQuery實(shí)現(xiàn)購物車計(jì)算價格功能的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)購物車計(jì)算價格功能的方法,實(shí)例分析了jQuery針對html元素的操作技巧,非常具有實(shí)用價值,需要的朋友可以參考下2015-03-03
jQuery學(xué)習(xí)筆記 操作jQuery對象 文檔處理
HTML文檔的層次關(guān)系是樹型的，每個標(biāo)簽可視為樹的各個節(jié)點(diǎn)。若操作jQuery對象，使得HTML文檔的結(jié)構(gòu)發(fā)生了改變，就叫做文檔處理2012-09-09
仿當(dāng)當(dāng)網(wǎng)淘寶網(wǎng)等主流電子商務(wù)網(wǎng)站商品分類導(dǎo)航菜單
本文實(shí)現(xiàn)了一個分類導(dǎo)航的菜單,和大多數(shù)流行的電子商務(wù)網(wǎng)站類似，詳細(xì)的實(shí)現(xiàn)可以直接查看源代碼.所有的代碼都在一個sidebar.html文件中2013-09-09
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)小火箭返回頂部特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02