datatables完整的增删改查
2016-05-31 18:08
176 查看
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+" <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> <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、最终效果
相关文章推荐
- linux下利用curl监控web应用状态
- iOS 日志
- NYoj289苹果(0-1背包)
- NYoj289苹果(0-1背包)
- ios GCD简单介绍 后台运行~
- Bootstrap表单验证插件bootstrapValidator使用方法整理
- easyui 中 的同步树(3)------用递归写
- 第四条 私有构造强化不可实例化
- 【BZOJ1649】[Usaco2006 Dec]Cow Roller Coaster【背包DP】
- [置顶] 如何选择 compileSdkVersion, minSdkVersion 和 targetSdkVersion
- Dubbo架构设计详解
- nginx 防 webshell 跨目录
- Google Android开发者文档系列-与其他应用程序交互之允许其他应用启动你的Activity
- 【linux】umask
- 图片上传处理 图片压缩 图片处理
- mysql连接问题
- 练习2.4 2.5
- 岛屿的个数
- 第10周 C语言程序设计(新2版) 3.5例题 函数atoi(s),将字符串转换为对应数值
- L3-004. 肿瘤诊断