如何使用 jquery.ajax 正确管理 dataable.js

Posted 2023-05-09

【中文标题】如何使用 jquery.ajax 正确管理 dataable.js

【英文标题】：how to manage properly datable.js with jquery.ajax

【发布时间】：2016-12-11 05:13:43

【问题描述】：

如何使用 jquery.ajax 语法和 codeigniter 正确管理数据表？我想使用我自己的语法，例如：

$.ajax(
  url:  url, 
)

我希望有人可以帮助我或给我部分代码来分析它。

  $(document).ready(function() 
            $('#example').DataTable( 
                "processing": true,
                "serverSide": true,
                "ajax": 
                    "url": "scripts/post.php",
                    "type": "POST"
                ,
                "columns": [
                     "data": "first_name" ,
                     "data": "last_name" ,
                     "data": "position" ,
                     "data": "office" ,
                     "data": "start_date" ,
                     "data": "salary" 
                ]
             );
         );

【问题讨论】：

您可以在 url 参数中使用任何您想要的值。从您的问题中不清楚您要达到什么目标。

我的意思是我不想使用数据表中的 ajax，但是 $.ajax() 我自己更好，但我该如何整合它？

【参考方案1】：

要独立于 DataTables init 执行 AJAX 查询：

执行您的 AJAX 调用并将结果存储在一个对象中，然后将该对象传递给启动您的表的函数：

var obj = ;
$.ajax(
    // your ajax parameters
).success(function (data) 
    obj = JSON.parse(data.d);
    //..perhaps verify obj has results before passing to dataToTable function
     dataToTable(obj);
);

dataToTable 函数类似于：

function dataToTable(dataSet) 
    $('#example').DataTable(
        "data": dataSet,
        //..your other datatables settings
    );

【讨论】：

不能在同一个函数中？

@azdejo 是的，他们可以。关键是您可以将 JSON 数据作为 javascript 对象传递给 DataTable 初始化中的"data" 选项。无论您如何设置该对象来保存 ajax 调用的结果。

那么我可以从 $.ajax() 的数据表中更改“ajax”

@azdejo 我不是 100% 确定你在问什么，但如果你说你想用 $.ajax() 替换 "ajax"，那么不，你不能。 "ajax" 是 DataTables 定义的一个选项，它的结构必须与您在第一个示例中的方式相同。您可以使用"data" 从另一个来源获取数据，在这种情况下是您自己的ajax 请求。 （顺便说一句，如果您在评论中使用@Name，它会提醒您已回复的指定人员，否则他们不会自动知道）。

是使用 $.ajax() 的 codeigniter 的其他数据

【参考方案2】：

你可以试试这个：

$('#table_id').dataTable(
    "sServerMethod": "GET",
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "scripts/post.php",   // codeigniter method url("scripts/get_data")
    "aoColumns": [  "bSortable": true ,  "bSortable": false ,  "bSortable": true ,  "bSortable": false ],      
);

这里的sAjaxSource就像ajax的url参数。