datatables实现异步加载与增删改查

来源：互联网发布：中级程序员报考条件编辑：程序博客网时间：2024/06/07 20:16
给大家分享一下我在项目中用datatables实现ajax加载数据与增删改查的js代码
/////////////////////////////////////////////////////////////////////////////////////// //点击查找 $("#seach").click(function(){table.ajax.reload();});     var table = $('#example').DataTable( {     "searching":false,    "serverSide": true,    "bProcessing": true,"bPaginate": true, //翻页功能"bLengthChange": true, //改变每页显示数据数量"bFilter": true, //过滤功能"bSort": false, //排序功能//"iDisplayLength" : 10,"sPaginationType": "full_numbers",//使用post方式"fnServerData": function ( sSource, aoData, fnCallback ) {var json = {    "page":{     "start": aoData[3].value,     "length": aoData[4].value,},                        "search":{                "xb": $("#sel").val(),        "fov_ck": $("#ah").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);                }             } );       },//"sAjaxSource": server+"user/queryUser.do","oLanguage": {"sLengthMenu": "每页显示 _MENU_ 条记录","sZeroRecords": "抱歉， 没有找到",//"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据","sInfoEmpty": "没有数据","sInfoFiltered": "(从 _MAX_ 条数据中检索)","oPaginate": {"sFirst": "首页","sPrevious": "前一页","sNext": "后一页","sLast": "尾页"},"sZeroRecords": "没有检索到数据",},"aoColumns": [ //{ "data": "guid" }, { "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()        //"tel": $("#tb_contact_phone").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: '职业：'+'<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="" />'});      });          //datatables $('#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;        }        //console.log( table.row( this ).data().zy );    } );//////////////////////////////////////////////////////////////////////////////////////////修改$("#change").click(function(){  if(adatid === ''){  alert("请选中要修改的数据");  }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()        //"tel": $("#tb_contact_phone").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: '职业：'+'<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("请删除要修改的数据");  }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();  }});
1 0