datatables完整的增刪改查

1、需要指定datatables的ID

<button class="btn  btn-primary" id="newAttribute">新增證照屬性</button>
<table class="table table-striped table-bordered table-hover dataTable myTable" id="newAttributeTable" width="100%" role="grid"   aria-describedby="editable_info">
</table>

 

2、初始化datatables

<script type="text/javascript">
$(function() {
//初始化證照屬性設置表
initnewAttributeTable();
});

//證照屬性設置表

function initnewAttributeTable() {
var table = $('#newAttributeTable').dataTable({
"paging": false, //翻頁
    //"bPaginate" : true,      //顯示分頁器
    //"iDisplayLength":28,
"ordering": false,
"searching": false, //搜索框
    //"bLengthChange":true,//改變每行顯示數據數量
    //"aLengthMenu": [[10, 30, 50, -1], [10, 30, 50, "All"]],
"bInfo": false, //頁腳
'bStateSave': true,
"bAutoWidth":false,
"bSort": true,
"processing": false,
"serverSide": false,
"sServerMethod": "get", //post
"bDestroy": true,
"ajax": {
"url": encodeURI("${pageContext.request.contextPath}/ajax/certificate/getCertificateTypeList"),
//"dataSrc": "data",//默認為data
"type": "get",
"error": function () {
      }
    },
"columns": [{
"data": null,
"title": "序號",
"sWidth":"30px",
"sClass": "text-tables-center",
"createdCell": function (nTd, sData, oData, iRow, iCol) {
var startnum = this.api().page() * (this.api().page.info().length);
$(nTd).html(iRow + 1 + startnum); //分頁行號累加：$(nTd).html(iRow+1);
}
    }, {
"data": "typeName",
"title": "證照屬性設置"
},{
"data": null,
"title": "操作"
}],
"columnDefs": [
      {
"targets": [1],
"data": "typeName",
"render": function (data, type, row) {
//isLockStatus:true：顯示有鎖   false:顯示沒有鎖
if(row.isLockStatus ==true){
return ""+row.typeName+"&nbsp;&nbsp;<i class='fa fa-lock l-fa' style='cursor: pointer'></i>";
}else{
return row.typeName;
}
        }
      },
{
"targets": [2],
"data": "id",
"sWidth":"60px",
"sClass": "text-tables-center",
"render": function (data, type, row) {
var id=  row.id ==undefined ? -1:row.id ;//-1說明是新增，其余表示為編輯
if(row.isLockStatus ==true){
return "-";
}else{
return "<i class='fa fa-pencil l-fa edit-btn' style='cursor: pointer' id=\'" + id + "\'></i>&nbsp;&nbsp;<i class='fa fa-trash-o m-fa del-btn' style='cursor: pointer' id=\'" + id + "\'></i>";
}
      }
    }, {
sDefaultContent: '',
aTargets: ['_all']
    }]
  });

//新增一行表格
$("#newAttribute").unbind('click').click(function () {
if ($("#newAttributeTable tbody tr:last td i").eq(0).attr('id') == -1) {
return;
}
$('#newAttributeTable').dataTable().fnAddData([]);
var nTrsLength = $("#newAttributeTable tbody tr").length;
var nTrs = $("#newAttributeTable tbody tr").eq(nTrsLength - 1);
var nIs = nTrs.find("td").eq(2).find("i").eq(0)
      nIs.click();
});
//點擊編輯圖標出現編輯框
$("#newAttributeTable tbody").unbind('click').on("click", ".edit-btn", function () {
var tds = $(this).parents("tr").children();
var i;
$.each(tds, function (i, val) {
var jqob = $(val);
var txt = jqob.text();
if (i == 1) {
var put = $("<input type='text' class='form-control' style='width:100%'>");
put.val(txt);
jqob.html(put);
}
      });
$(this).toggleClass("edit-btn fa-pencil");
$(this).toggleClass("save-btn fa-save");
});
//保存按鈕
$("#newAttributeTable tbody").on("click", ".save-btn", function () {
var id =$(this).attr("id");
var tds = $(this).parents("tr").children();
var sTds = tds.length;
var lisval = [];
for (var i = 0; i < sTds; i++) {
if (i < sTds - 1)
          lisval.push(tds.eq(i).children("input").val());
else lisval.push(tds.eq(i).children("input").val())
      }
if (i == sTds - 1) lisval.push();
if (lisval[1] == "") {
toNotification("警告！", "證照屬性設置不能為空！", "warning");
return false;
} else if(lisval[1].length >10){
toNotification("警告！", "證照屬性設置不能超過十個字符！", "warning");
return false;
}else {
$.each(tds, function (i, val) {
var jqob = $(val);
//把input變為字符串
if (!jqob.has('i').length) {
var txt = jqob.children("input").val();
jqob.html(txt);
}
         });
$(this).toggleClass("edit-btn fa-pencil");
$(this).toggleClass("save-btn fa-save");
//保存數據
SaveData(lisval[1],id);
}
    });

//證照屬性設置保存信息
function SaveData(msg,id){
var data ={
id: id,   //-1表示是新增
typeName: msg
    }
var  url  = encodeURI("${pageContext.request.contextPath}/ajax/certificate/saveCertificateType");
actionRequest(data,url,function(data){
if (data.successed) {
toNotification("提示！","操作成功！", "success");
//刷新表格
initnewAttributeTable();
}else {
toNotification("操作失敗！", data.message, "error");
//刷新表格
initnewAttributeTable();
}
    });
}

//證照屬性設置刪除
$("#newAttributeTable tbody").on("click", ".del-btn", function () {
var id =$(this).attr("id");
if (id==-1) {
var trs = $(this).parents("tr");
initnewAttributeTable();
return false;
}else{
var tds = $(this).parents("tr").children();
var data = {id: id };
var url="/ajax/certificate/deleteCertificateType";
//執行刪除
toConfirm(data,url,function(data){
if (data.successed) {
swal({
title: "刪除成功",
text: "<small>1秒后自動關閉<small>",
type: "success",
html: true,
timer: 1000
});
initnewAttributeTable();
} else {
swal("刪除失敗!", data.message, "error");
}
        });
}
    });
}
//獲得標識
function getActionId() {
return new Date().getTime();
} 
</script >

 

3、最終效果