DataTables 和amp; X-editable - 使用ajax从后端获取数据

（一）ajax请求后端数据

$.ajax({
    url: "/xx/yy",
    type: "post",
    data: {"test": test},
    dataType: "json",
    success: function(ret){
        if(!ret["success"]) { alert(ret["msg"]); return; }
    },
    error: function(jqXHR, textStatus, errorThrown){
        window.location.reload();
    }
});

• data：要发送给服务端的数据，一般是Object类型或者function（参数为要发送的Object类型数据）。
• success：处理服务端响应数据的回调，参数为Object类型，一般会用success属性来表示请求是否成功。
   

（二）DataTables使用ajax请求后端数据

dataTable = $("#id").DataTable({
    pagingType: "input",
    serverSide: false,
    scrollY: true,
    scrollX: true,
    scrollCollapse: true,
    dom: "lfrtip",
    select: {
        style: "os",
        items: "row",
    },
    columns :[
        {title: "xxx", data: "xxx", name: "xxx", width: "50%"},
        {title: "yyy", data: "yyy", name: "yyy"},
    ],
    ajax: {
        url: "/xx/yy",
        type: "post",
        dataType: "json",
        data: function(data){
            data["u"] = u;
            data["v"] = v;
            return data;
        },
        dataSrc: function(ret) {
            if (ret["success"]) { return ret["data"]; }
            else { alert(ret["msg"]); return; }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            window.location.reload();
        }
    },
});

• dataSrc：和ajax有所区别，DataTables可以在此处理服务器响应的数据。
• serverSide：如果该值为true，则表格的分页、查找、排序、过滤等逻辑都会向服务端发出请求，服务端再响应处理过后的数据。（默认为false的话这些逻辑都是在前端进行的）。另外，如果serverSide=true时还可以通过增加firstAjax: false来实现表格初始化时不向服务端请求数据（比如请求数据的参数还没准备好的情况下肯定是不想在datatable初始化时就请求数据的，一来请求不到想要的数据，浪费一次请求；二来请求的数据不匹配可能会抛出异常），从而等后面执行datatable.ajax.reload()时再按需请求数据。
   

（三）X-editable使用ajax请求后端数据

$("#id").editable({
    ajaxOptions: {type: 'post', dataType: 'json'},
    params: function(data){
        data["u"] = u;
        data["v"] = v;
        return data;
    },
    url: "/xx/yy",
    type: "textarea",
    mode: "inline",
    onblur: "submit",
    display: function(value, ret){
        
    },
    success: function(ret, value){
        if (ret["success"]) { return; }
        else { alert(ret["msg"]); return {"newValue": oldValue}; }
    },
});

• params：相当于ajax的data。
• success：value是编辑框输入的新值。如果直接return编辑框则直接显示输入的新值。如果return的Object数据制定了newValue属性，则显示该属性值（比如请求失败时编辑框仍想显示旧值）。
• display：一般用于接收到服务器数据时更新前端的显示（不做数据处理，仅作用显示）。
   

【参考链接】
【1】Server-side processing 服务端处理
【2】https://www.x-editable.cn/docs.html

这篇好文章是转载于：学新通技术网