Jquery datatables 插件，排序/过滤数据后显示“表中没有可用数据”

Posted 2023-05-07

【中文标题】Jquery datatables 插件，排序/过滤数据后显示“表中没有可用数据”

【英文标题】：Jquery datatables Plug-In , display "No data available in table" after Sorting/Filtering Data

【发布时间】：2015-11-02 00:39:58

【问题描述】：

我使用JSON 格式从服务器获取数据以填充DataTables 表。 在$().ajax 函数的成功部分，我检查并成功返回响应。 这是我桌子的Fiddle：

从服务器返回的Json文件示例如下：

    "data": [
        
            "__type": "TEST1.Campaign",
            "BookingID": 0,
            "CatalogueNumber": "IEM201343000007",
            "CampaignId": 34,
            "StartTime": "/Date(1438437600000)/",
            "EndTime": "/Date(1440079200000)/",
            "DurationPlayout": 3,
            "AdDuration": 5,
            "CampaignType": "facebook",
            "Stations": [
                "7mate.brisbane.au",
                "eleven.brisbane.au",
                "nine.brisbane.au"
            ],
            "Client_ID": 192,
            "ContactID": 5851,
            "AdvertiserID": 9228,
            "Active": true,
            "SModified": null,
            "DSP": "SiteScout",
            "ClientName": "",
            "AdvertiserName": "H A Consulting",
            "ContactName": "Aisling Bannan"
        
    ] 

我在 ajax 响应后手动创建表，所以这种方式的数据表有什么问题吗？ 当我按列过滤或排序表记录时，会发生此问题：

---

表格中没有可用数据

---

任何帮助将不胜感激。

12/08/2015 更新代码：

我根据Gyrocode 的 回答更新了this fiddle link 中的代码。 1）当我点击刷新按钮时，表格再次初始化，但是当我点击排序列或想要搜索数据时它会是空的。 2）每列的宽度设置不正确。 3）有些列是隐藏的，但它们显示在每行末尾的表格中。 4）同样为了使用Orthogonal data，我需要在MM/DD/YY中有日期时间，我使用.Net datetime作为这个字段，但它似乎在Client-side.so的JSON字符串中更改为TimeStamp，有没有怎么制作成自定义格式？

【问题讨论】：

将数据附加到表格主体，而不仅仅是表格。

你的小提琴有几个问题，但不确定这是导致你的问题的原因还是只是示例代码的问题。首先，表ID是example，但是在你的JS中它被称为Items。将表的 ID 更改为Items。其次，在你的 JS 中，return false 之后有一个额外的)。让我知道这些只是小提琴错误还是您的代码有问题。

@jonmrich 感谢您告知我有关问题。是的。它们是我修复的小提琴错误。

【参考方案1】：

原因

您的代码存在许多语法错误和其他问题，此答案太长，无法全部列出。

需要考虑的重要事项是：

需要使用正确数量的th，包括隐藏列。稍后使用columnDefs 隐藏某些列。 您生成tr/td 的方法可以，但会使代码复杂。 DataTables 可以为您发送 ajax 请求，并通过正确的配置为您处理返回的数据。请参阅Orthogonal data example 了解更多信息。

演示

请参阅updated jsFiddle 以获取更正代码的演示。

【讨论】：

感谢您的回答，以及漂亮的小提琴。实际上我在 Fiddle 中遇到了一些拼写错误，但我更新了它。正如您所提到的，问题是我的数据表定义（作为您的代码）： var table = $('#Items').DataTable( columnDefs: [ targets: [6,7,8,9,10], visible:假]);

我对这个解决方案有疑问，实际上，表格应该在页面加载时初始化并填充一些文本更改，所以我应该在每次 text_change 时初始化它吗？它出现错误，当我尝试使用 datatables.net/manual/tech-notes/3 时，页脚将无法正常工作

请创建一个 jsFiddle 来演示问题，否则很难理解您要实现的目标。