jquery datatables 加载数据 两种方式

两种加载数据

1.页面加载完成后 数据就加载  serverSide :true  +  ajax 访问服务器
 var dt = $("#my_table").DataTable({
        language: {
            url: '/lib/jquery.datatables/js/'+LANG+'.json'
        },
        ordering: false,
        searching: false,
        processing: true,
        serverSide: true,
        paging: true,
        aLengthMenu: [10,20,50],
        ajax: {
            url: url,
            type: 'POST',
            dataType: 'json',
            processData: false,
            contentType: false,
            data: function(){
                var form = new FormData();
                form.append('_csrf',$("meta[name='csrf-token']").attr("content"));
                form.append('batch', $("#batch").val());
                form.append('PlatId', $("#PlatId").val());
                form.append('length', dt.page.info().length);
                form.append('start', dt.page.info().start);
                return form;
            }
        },
        columns: [
            {data: "batch"},
            {data: "PlatId"},
            {data: "oldservicename"},
            {data: "uid"},
            {data: "oldpid"},
            {data: "newservicename"},
            {data: "newpid"},
            {data: "create_user"},
            {data: "create_time"},
            {data: "status"},
            {
                data: null,
                defaultContent: "<button type='button' class='btn btn-primary btn-sm operationOne' operation='"+passStatus+"'>通过</button><button type='button' class='btn btn-danger btn-sm operationOne' operation='"+rejectStatus+"'>驳回</button>"
            },
        ]
    });


2.页面加载完毕 数据为空  ，数据读取需触发  serverSide: false

var dt = $("#prop_table").DataTable({
    language: {
        url: '/lib/jquery.datatables/js/zh_CN.json'
    },
    ordering: false,
    searching: false,
    processing: true,
    serverSide: false,
    destroy: true,
    paging: true,
    aLengthMenu: [10, 25],
    columns: [{
        data: "game"
    }, {
        data: "platform"
    }, {
        data: "prop_type"
    }, {
        data: "prop_id"
    }, {
        data: "prop_name"
    }, {
        data: "top_limit"
    }, {
        data: "updated_by"
    }, {
        data: "updated_at"
    }, {
        data: null,
        defaultContent: "<button type='button' class='btn btn-warning btn-sm edit'>修改</button>"
    }]
});
// 修改以后跳回 回填 游戏 筛选条件并加载相应的数据
if (document.referrer.indexOf("edit") != -1 && localStorage.game) {
    $("#game").val(localStorage.game);
    dt.on("init", function() {
        ajaxLoad();
    });
}
// 加载数据
function ajaxLoad() {
    dt.clear().draw();
    $(".dataTables_processing").css("display", "block");
    $.ajax({
        data: {
            _csrf: $("meta[name='csrf-token']").attr("content"),
            game: $("#game").val(),
            platform: $("#platform").val(),
            prop: $("#prop").val()
        },
        url: '/admin/prop/index',
        type: 'post',
        dataType: 'json'
    }).done(function(res) {
        $(".dataTables_processing").css("display", "none");
        if (res.flag == 1) {
            dt.rows.add(res.info.data).draw();
        }
        return false;
    });
}


$("button.pull").on('click', function(){
        var id = this.id;
        var url = option.url[id];
        var game = $("#game").val();
        var platform = $("#platform").val();
        if(!game){
            alert("请选择游戏");
            return;
        }
        if(id == 'pullProp' && !platform){
            alert("请选择平台");
            return;
        }

        $.ajax({
            url : url,
            data : {
                _csrf: $("meta[name='csrf-token']").attr("content"),
                "game":game,
                "platform":platform
            },
            type : 'post',
            dataType : 'json',
            success : function (data) {
                if (data.flag == 1) {
                    $.gritter.add({
                        title: '成功',
                        text: data.info,
                        class_name: 'success',
                        time: 1000,
                    });
                } else {
                    $("button").removeAttr("disabled");
                    $.gritter.add({
                        title: '失败',
                        text: data.info,
                        class_name: 'danger',
                    });
                }

                dt.ajax.reload();
            }
        })
    })