Question

我正在使用带有服务器端处理的dataTable。我想将令牌作为自定义参数发送到服务器。令牌由AJAX设置。当关于dataTable的AJAX请求被触发时，发送的token参数始终为null。我认为这是因为在获取令牌进程完成之前触发了dataTable上的AJAX请求。这是我已经尝试过的方法。

1。使用ajax.data

    function GetToken() {
        var token;
        $.get("/User/GetToken?_=" + new Date().getTime(), function (token) {
            token= token;
        });
        return token;
    }

    var dataTable = $('#dataTable').DataTable({
        serverSide: true,
        pagingType: 'full_numbers',
        scrollY: false,
        scrollX: true,
        sort: false,
        fixedColumns: true,
        autoWidth: true,
        language: {
            paginate: {
                first: "&lt;&lt;",
                previous: "&lt;",
                next: "&gt;",
                last: "&gt;&gt;",
            }
        },
        pageLength: 10,
        lengthMenu: [[2, 5, 10, 25, 50], [2, 5, 10, 25, 50]],
        columns: [
                { "data": "Name", "autoWidth": true },
                { "data": "Address", "autoWidth": true },
                { "data": "Gender", "autoWidth": true },
        ],
        ajax: {
            url: '@Url.Action("LoadData", "Student")',
            type: 'POST',
            data: { token: GetToken() }
            dataSrc: "Data"
        }
    });

2。使用preXhr.dt

    var dataTable = $('#dataTable')
        .on('preXhr.dt', function (e, settings, data) {
            $.get("/User/GetToken?_=" + new Date().getTime(), function (token) {
                data.token = token;
            });
        })
        .DataTable({
            serverSide: true,
            pagingType: 'full_numbers',
            scrollY: false,
            scrollX: true,
            sort: false,
            fixedColumns: true,
            autoWidth: true,
            language: {
                paginate: {
                    first: "&lt;&lt;",
                    previous: "&lt;",
                    next: "&gt;",
                    last: "&gt;&gt;",
                }
            },
            pageLength: 10,
            lengthMenu: [[2, 5, 10, 25, 50], [2, 5, 10, 25, 50]],
            columns: [
                    { "data": "Name", "autoWidth": true },
                    { "data": "Address", "autoWidth": true },
                    { "data": "Gender", "autoWidth": true },
            ],
            ajax: {
                url: '@Url.Action("LoadData", "Student")',
                type: 'POST',
                dataSrc: "Data"
            }
        });

第3。在preXhr.dt上添加循环延迟

    var isTokenChange = false;
    var dataTable = $('#dataTable')
        .on('preXhr.dt', function (e, settings, data) {
            $.get("/User/GetToken?_=" + new Date().getTime(), function (token) {
                data.token= token;
                isTokenChange = true;
            });

            while(!isTokenChange) {

            }

            isTokenChange = false;
        })
        .DataTable({
            serverSide: true,
            pagingType: 'full_numbers',
            scrollY: false,
            scrollX: true,
            sort: false,
            fixedColumns: true,
            autoWidth: true,
            language: {
                paginate: {
                    first: "&lt;&lt;",
                    previous: "&lt;",
                    next: "&gt;",
                    last: "&gt;&gt;",
                }
            },
            pageLength: 10,
            lengthMenu: [[2, 5, 10, 25, 50], [2, 5, 10, 25, 50]],
            columns: [
                    { "data": "Name", "autoWidth": true },
                    { "data": "Address", "autoWidth": true },
                    { "data": "Gender", "autoWidth": true },
            ],
            ajax: {
                url: '@Url.Action("LoadData", "Student")',
                type: 'POST',
                dataSrc: "Data"
            }
        });

对于第三种方式，它有效，但我认为这不是一个好的解决方案。我的问题是，在收到令牌之前，在数据表上保持或延迟ajax请求的好方法是什么？

Answer 1

您可以链接您的呼叫，仅当您收到令牌时才会触发数据表初始化。

function GetToken() {
    var token;
    $.get("/User/GetToken?_=" + new Date().getTime(), function (token) {
        initializeTable(token);
    });
}

initializeTable(token){
// Here initialize ur data table with the passed token.
}

Answer 2

这对我有用：

dataTable.context[0].ajax.data.yourCustomValue = value;

由于我的变量名为bwsValue：

var dataTable = $('#users-grid').DataTable( {
    "dom": 'lrtip',
    "order": [[ 0, "asc" ]],
    "processing": true,
    "serverSide": true,
    "ajax":{
        url :"users_list.php?active="+active,
        "data": {
            "bwsValue": 1
        },
        type: "post",
    }
});

我现在可以将数据设置为：

dataTable.context[0].ajax.data.bwsValue = 2;

Answer 3

在这种情况下你不想做异步请求，所以不要使用$ .get尝试这样的事情（async：false）：

$.ajax({
    type: "GET",
    async:false,
    url: "/User/GetToken?_=" + new Date().getTime(),
    success: function(token, textStatus, xhr) {
        data.token = token;
    }
});

将动态值从AJAX传递到jQuery dataTable中的自定义参数

3 个答案: