jquery异步-datatable前端
基于JQuery的datatable更新示例：
var InitiateEditableDataTable = function () {
return {
init: function () {
//Datatable Initiating
var oTable = $('#editabledatatable').dataTable({
"aLengthMenu": [
[5, 15, 20, 100, -1],
[5, 15, 20, 100, "All"]
],
"iDisplayLength": 5,
"sPaginationType": "bootstrap",
"sDom": "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",
"oTableTools": {
"aButtons": [
"print"],
"sSwfPath": "assets/swf/copy_csv_xls_pdf.swf"
},
"language": {
"search": "",
"sLengthMenu": "_MENU_",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"aoColumns": [
null,
null,
null,
null,
null,
null,
null,
null,
{ "bSortable": false }
]
});
var isEditing = null;
//Add New Row
$('#editabledatatable_new').click(function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: "car.action?action=getAllStaffNo",
dataType: "json",
data: "",
success: function (data, status) {
fore = '<select name="staffno" class="form-control">';
var inter = '';
var temp = '';
for(var i=0;i<data.length;i++){
temp = '<option value="'+data[i]+'">'+data[i]+'</option>';
inter = inter + temp;
}
end = '</select>';
var aiNew = oTable.fnAddData(['', '', '', '','','','',fore+inter+end,
'<a href="#" class="btn btn-success btn-xs save"><i class="fa fa-edit"></i> Save</a> <a href="#" class="btn btn-warning btn-xs cancel"><i class="fa fa-times"></i> Cancel</a>'
]);
var nRow = oTable.fnGetNodes(aiNew[0]);
editRow(oTable, nRow,data);
isEditing = nRow;
}
})
});
//Delete an Existing Row
$('#editabledatatable').on("click", 'a.delete', function (e) {
e.preventDefault();
if (confirm("确认删除这行数据吗？") == false) {
return;
}
var nRow = $(this).parents('tr')[0];
var aData = oTable.fnGetData(nRow);
$.ajax({
type: 'POST',
url: "car.action?action=deleteCar",
dataType: "json",
data: {
"id" : aData[0]
},
success: function (data,textStatus) {
if(textStatus=="success"){
if(data.status==0){
alert(data.mes);
oTable.fnDeleteRow(nRow);
}
}else{
alert("网络异常，请稍后再试！");
}
},
error:function (XMLHttpRequest,textStatus,errorThrown){
alert("error");
}
})
});
//Cancel Editing or Adding a Row
$('#editabledatatable').on("click", 'a.cancel', function (e) {
e.preventDefault();
var input = $('input', isEditing);
if (input[0].value == "") {
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
isEditing = null;
} else {
restoreRow(oTable, isEditing);
isEditing = null;
}
});
//Edit A Row
$('#editabledatatable').on("click", 'a.edit', function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];
$.ajax({
type: 'POST',
url: "car.action?action=getAllStaffNo",
dataType: "json",
data: "",
success: function (data, status) {
if (isEditing !== null && isEditing != nRow) {
restoreRow(oTable, isEditing);
editRow(oTable, nRow, data);
isEditing = nRow;
} else {
editRow(oTable, nRow, data);
isEditing = nRow;
}
}
})
});
//Save an Editing Row
$('#editabledatatable').on("click", 'a.save', function (e) {
e.preventDefault();
if (this.innerHTML.indexOf("Save") >= 0) {
var input = $('input', isEditing);
var select = $('select', isEditing);
var nRow = $(this).parents('tr')[0];
function CheckData() {
var busNumberLe = input[2].value.length;
var driverPhoneNoLe = input[4].value;
var re = /^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$/;
var driver = input[3].value.length;
var carLine = input[5].value;
var carNo = input[1].value.length;
var carNoValue = input[1].value;
var userNo = select[0].value.length;
if(carNo<3){
alert("请填写正确的车辆号！");
return false;
}
if(!(/^[a-z]{3}$/.test(carNoValue.substring(0,3)))){
alert("车辆号格式不正确！")
return false;
}
if (busNumberLe == 0) {
alert("车牌号不能为空，请输入。")
return false;
}
if (input[2].value.search(re) == -1) {
alert("输入的车牌号格式不正确");
return false;
}
if (driver == 0) {
alert("请输入姓名！")
return false;
}
if (!(/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(driverPhoneNoLe))) {
alert("不是完整的11位手机号或者正确的手机号前七位");
return false;
}if (userNo == 0) {
alert("请输入职工号！")
return false;
}else {
return true;
}
}
var jsonData = {
"id" : input[0].value,
"carNo" : input[1].value,
"carIdtiNumber" : input[2].value,
"driver" : input[3].value,
"driverPhoneNo" : input[4].value,
"carLineId" : input[5].value,
"status" : input[6].value,
"userNo" : select[0].value
};
if(CheckData()){
$.ajax({
type: 'POST',
url: "car.action?action=saveByAJax",
dataType: "json",
data: {
"ss" : JSON.stringify(jsonData)
},
success: function (data, status) {
if (data.status == 0) {
alert(data.mes);
saveRow(oTable, isEditing);
}else{
alert(data.mes);
if(input[0].value==""){
oTable.fnDeleteRow(nRow);
}else{
saveRowError(oTable, isEditing);
}
}
isEditing = null;
},
error:function (a,b,c){
alert("error")
}
})
}
}
});
function restoreRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
oTable.fnUpdate(aData[i], nRow, i, false);
}
oTable.fnDraw();
}
function editRow(oTable, nRow,data) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
fore = '<select name="staffno" class="form-control">';
var inter = '';
var temp = '';
for(var i=0;i<data.length;i++){
temp = '<option value="'+data[i]+'">'+data[i]+'</option>';
inter = inter + temp;
}
end = '</select>';
jqTds[0].innerHTML = '<input type="text" style="width:50px;" class="form-control input-small" disabled="true" value="' + aData[0] + '">';
jqTds[1].innerHTML = '<input type="text" style="width:100px;" class="form-control input-small" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="text" style="width:100px;" class="form-control input-small" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<input type="text" style="width:100px;" class="form-control input-small" value="' + aData[3] + '">';
jqTds[4].innerHTML = '<input type="text" style="width:110px;" class="form-control input-small" value="' + aData[4] + '">';
jqTds[5].innerHTML = '<input type="text" style="width:50px;" class="form-control input-small" value="' + aData[5] + '">';
jqTds[6].innerHTML = '<input type="text" style="width:50px;" class="form-control input-small" value="' + aData[6] + '">';
jqTds[7].innerHTML = fore+inter+end;
jqTds[8].innerHTML = '<a href="#" class="btn btn-success btn-xs save"><i class="fa fa-save"></i> Save</a> <a href="#" class="btn btn-warning btn-xs cancel"><i class="fa fa-times"></i> Cancel</a>';
}
function saveRow(oTable, nRow,data) {
var jqInputs = $('input', nRow);
var select = $('select', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
oTable.fnUpdate(jqInputs[5].value, nRow, 5, false);
oTable.fnUpdate(jqInputs[6].value, nRow, 6, false);
oTable.fnUpdate(select[0].value, nRow, 7, false);
oTable.fnUpdate('<a href="#" class="btn btn-info btn-xs edit"><i class="fa fa-edit"></i> Edit</a> <a href="#" class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i> Delete</a>', nRow, 8, false);
oTable.fnDraw();
}
function saveRowError(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate('<a href="#" class="btn btn-info btn-xs edit"><i class="fa fa-edit"></i> Edit</a> <a href="#" class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i> Delete</a>', nRow, 8, false);
oTable.fnDraw();
}
function cancelEditRow(oTable, nRow) {
var jqInputs = $('input', nRow);
var select = $('select', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
oTable.fnUpdate(jqInputs[5].value, nRow, 5, false);
oTable.fnUpdate(jqInputs[6].value, nRow, 6, false);
oTable.fnUpdate(select[0].value, nRow, 7, false);
oTable.fnUpdate('<a href="#" class="btn btn-info btn-xs edit"><i class="fa fa-edit"></i> Edit</a> <a href="#" class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i> Delete</a>', nRow, 8, false);
oTable.fnDraw();
}
}
};}();