关键词：
【中文标题】如何使用 Jquery Datatable 仅对当前页面进行排序【英文标题】：How to Sort only the current page using Jquery Datatable 【发布时间】：2015-02-10 19:55:21 【问题描述】：我在很多项目中都使用了 Jquery 数据表，它在所有场景中都能完美运行。
对于我当前的项目，我要求仅对当前页面进行排序，但默认情况下数据表将对整个数据进行排序并重绘整个表格。
我确信会有一些简单的配置来启用此功能，但在他们的论坛中除了这些行之外找不到任何配置
var table = $('#example').DataTable();
// Sort by column 1 and then re-draw
table
.order( [[ 1, 'asc' ]] )
.draw( false );
我试过了，但似乎没有任何效果。在请分享您的代码之前，任何人已经成功实现了这一点。
【问题讨论】：
好吧，我猜没有这样的事情，但您可以指定要在哪一列上对哪一页进行排序 onloadtable.page(10).draw( false );table.order( [ 3, 'desc' ] ).draw( false );
【参考方案1】：
在询问如何仅对当前页面进行排序之前，我们应该回答以下问题：
我们为什么要做这样的排序？ 我们应该这样做吗？ 有什么意义吗？ 这样的决定有什么影响？当我们要执行查询并显示我们正在处理的结果列表时：
搜索条件 排序标准 分页这三个元素密切相关，它们清楚地定义了用户在屏幕上看到的内容。 例如，我们可以有以下描述：
有一个演员列表。它按名称排序并分为页面（每页 50 项）。我们在第三页。
当我们有这样的规则时，那么用户在这个列表中就有很好的定位。他在页面顶部看到迈克尔凯恩，在页面底部看到肖恩康纳利。 当他想找到罗伯特杜瓦尔时，他知道他应该多走几页。 当他想查看这些按年龄排序的演员时，他只需使用列表并返回到第一页。
但是如果我们只为当前页面提供额外的排序呢？这会扰乱上述系统的凝聚力。 如果我们对用户说：
您现在看到的是按年龄排序的演员名单（页）的第三页。
该用户仅使用当前页面可以获得什么？名称以“C”开头的演员的年龄层次结构？ 在页面顶部，将显示该页面中最年长的演员。但是用户不知道它是否是所有列表中最老的演员。 如果不是，那么他应该在哪个页面上寻找旧的？这种诉诸毫无价值，它会覆盖初始排序（它有一些价值）。
这种诉诸也可能导致用户严重混淆。他可以放松对原始排序和页面排序的定位。
结论：
我认为为单页提供排序没有任何意义。我觉得它有害。所以你应该只在你有强有力的论据时才使用它。
【讨论】：
嗨 rtuszk，我明白了你的意思，这绝对是有道理的。但是有时候，当我们为客户做迁移项目时，客户所需要的只是精确复制他们现有的功能，我们别无选择；）赞成很好的解释。 我很好奇是否有任何强有力的论据来提供这样的功能。我很乐意阅读它们。 我想要类似的功能，直到我读到你的帖子@rtruszk【参考方案2】：更新 1
虽然我同意 rtruszk，但我仍然认为如果 0) 您别无选择或 1) 您的客户不愿意讨论 UX 更改，则应该找到/探索解决方案。
工作示例： http://jsfiddle.net/ebRXw/63/
我能够通过从 DataTable 中过滤掉当前可见的行来完成您的任务。我尽力在 DataTables 中找到一个解决方案，可能存在一个，但最后我使用 jQuery 和哈希表来识别和过滤掉当前可见的行。
我相信这可以进一步优化。希望它能让你朝着正确的方向前进。
$(document).ready(function ()
var table = $('#example').DataTable(
"columnDefs": [
"targets": [0],
"visible": false,
"searchable": true
]
);
// Show page 0
table.page(0).draw(false);
// Sort by column 1 (Name)
table.order([1, 'asc']).draw(false);
$("#ReloadTable").click(function ()
// Clear the current filter
oTable = $('#example').dataTable();
oTable.fnFilter('', 0);
oTable.fnFilter('');
// Reset all "visible" values in the first cell
var table = $('#example').DataTable();
table.rows().indexes().each(function (idx)
var d = table.row(idx).data();
table.row(idx).data()[0] = 0;
d.counter++;
table.row(idx).data(d);
);
);
$("#FilterCurrentPage").click(function ()
// Create a hash of the index of currently visible rows
var h = new Object();
var x = $('.odd,.even').filter(function ()
var idx = $(this)[0]._DT_RowIndex;
h[idx] = idx;
return this.style.display == ''
);
// update the first value based on the currently visible rows
var table = $('#example').DataTable();
table.rows().indexes().each(function (idx)
var d = table.row(idx).data();
if (h.hasOwnProperty(idx))
table.row(idx).data()[0] = 1;
d.counter++;
table.row(idx).data(d);
);
// filter rows with a value of 1 in the first cell
oTable = $('#example').dataTable();
oTable.fnFilter(1, 0);
);
);
更新 0
我还没有找到解决方法，但我确信存在解决方法。下面的代码将选择并返回数据表中当前可见的行。
var x = $('.odd,.even').filter(function ()
$(this).addClass('selected'); // Select the visible rows
return this.style.display == ''
);
From the DataTables maintainer:
有没有一种简单的方法可以告诉数据表我只想对当前分页进行排序和重绘？
在 DataTables 1.9 中 - 不，没有 这样做的方式，但在 1.10 中你可以使用 table.order( ... ).draw( 错误的 ）;保留分页。 1.10 pre beta 可以在 git 中使用，如果你 想给它一个狂欢:-)
艾伦
通过datatables: sort only current pagination of table
但是，您也许能够获取当前可见的行，对它们进行排序，然后以某种方式显示它们。下面的代码提供了过滤后的当前可见行。
var table = $('#example').DataTable();
table.$('tr', "filter":"applied");
另见：
jquery DataTables. How to get filtered (visible) rows fnGetData of visible rows only Retrieving row data after filtering JQuery Datatables【讨论】：
谢谢 JSuar，让我试试这个然后回来！ @ssilas777，我用一个可行的解决方案更新了我的答案。如果您发现任何问题，请告诉我。 这真的很棒，感谢您在这方面的努力，正如您所说，到目前为止我也无法在数据表中找到解决方案，所以我接受这个作为答案。跨度> 【参考方案3】：@JSuar 建议的解决方案很好，但我不喜欢它的一件事是，每次要对表格进行排序时都必须单击额外的按钮，并且分页被禁用（对我来说不是很自然）。如果它适合您的用例，那就去吧！ 但是，如果您不想每次都点击那些额外的按钮来重新加载表格，并且如果您想让表格尽可能自然，我们可以执行以下操作。
算法
禁用Datatables 内置排序功能。
获取当前页面上的行并自行排序。
使用已排序的行重新绘制表格。
工作 js 小提琴：https://jsfiddle.net/manikumarperla/rhsz2qnt/39/
最终结果（仅对当前页面排序）
通过使用自己的排序逻辑，您可以完全控制表格，并且可以做任何事情。
【讨论】：
这看起来很棒！如何在 DataTable 子行中使用 jQuery 返回 div
】如何在DataTable子行中使用jQuery返回div【英文标题】：HowtoreturnadivusingjQueryinaDataTablechildrow【发布时间】：2020-08-0811:53:45【问题描述】：使用jQuery返回div时遇到问题。下面的附加代码仅在第一次显示childRow内容之前有效，不幸的是... 查看详情
如何使用java编辑jquery dataTable [关闭]
】如何使用java编辑jquerydataTable[关闭]【英文标题】：HowtoeditajquerydataTableusingjava[closed]【发布时间】：2016-07-2006:57:52【问题描述】：我只想在我的jquery数据表中编辑一个选定的行。【问题讨论】：您在问一个非常笼统的问题。您能... 查看详情
如何使用 Web API 调用中的数据填充 jquery DataTable
】如何使用WebAPI调用中的数据填充jqueryDataTable【英文标题】：HowtopopulatejqueryDataTableusingdatainWebAPIcalls【发布时间】：2018-09-0703:56:11【问题描述】：我是ASP.NET和jquery的新手。我想使用ajax填充DataTable。使用来自WebAPI的数据。例如api/E... 查看详情
如何根据值更改jquery dataTable中的行颜色
】如何根据值更改jquerydataTable中的行颜色【英文标题】：howtochangetherowcolorinjquerydataTablebasedonthevalue【发布时间】：2019-05-2920:33:27【问题描述】：我在javascript和jquery中使用DataTable来设置交互式表格。我想根据单元格值更改行颜色... 查看详情
如何使用带有 AngularJs 的 Jquery Datatable 导出表
】如何使用带有AngularJs的JqueryDatatable导出表【英文标题】：HowtouseJqueryDatatablewithAngularJstoexporttable【发布时间】：2018-06-0421:39:21【问题描述】：我正在开发需要将表格数据导出为pdf的Angular网站。我想为它使用jQuery数据表，因为它... 查看详情
如何更改 JQuery.DataTable 中单元格的样式？
】如何更改JQuery.DataTable中单元格的样式？【英文标题】：HowdoyouchangethestyleofcellinaJQuery.DataTable?【发布时间】：2011-02-1613:40:44【问题描述】：我有一个关于为jQuery.DataTable中的数据单元格设置样式属性的问题。使用以下代码初始化d... 查看详情
如何在不同 jquery ui 选项卡中的 gridviews 中使用 jquery Datatable 插件？
】如何在不同jqueryui选项卡中的gridviews中使用jqueryDatatable插件？【英文标题】：HowdoiusejqueryDatatablepluginingridviewspresentindifferentjqueryuitabs?【发布时间】：2014-05-0106:28:08【问题描述】：我在jqueryui选项卡中的gridview中使用jquery数据表插... 查看详情
如何在 asp.net 中使用 JSON 和 JQuery 从 WebMethod 返回 DataTable？
】如何在asp.net中使用JSON和JQuery从WebMethod返回DataTable？【英文标题】：HowtoReturnDataTablefromWebMethodusingJSONandJQueryinasp.net?【发布时间】：2013-12-1722:49:27【问题描述】：我是JSON的新手。我创建了一个示例，它从WebMethod返回String，并将... 查看详情
jquery datatable - 如何使用渲染函数从另一列获取数据
】jquerydatatable-如何使用渲染函数从另一列获取数据【英文标题】：jquerydatatable-Howtouserenderfunctiongetdatafromanothercolumn【发布时间】：2017-03-2414:55:42【问题描述】：我在每一行都有添加按钮，但我想检查信息列数据是否为N/A，然... 查看详情
如何创建 jQuery Datatable 向下钻取行？
】如何创建jQueryDatatable向下钻取行？【英文标题】：HowtocreatejQueryDatatableDrill-downrows?【发布时间】：2017-02-2020:40:36【问题描述】：在我的MVC项目中，我尝试使用单个Datatable并折叠行以获取详细数据，如Creatinganexpandablemaster-detailstab... 查看详情
我想使用 jQuery DataTable 但我收到错误
】我想使用jQueryDataTable但我收到错误【英文标题】：IwanttouseajQueryDataTablebutI\'mgettinganerror【发布时间】：2021-06-2905:23:03【问题描述】：Error我想用jQueryDataTable做多列过滤，但是我得到一个错误，我不知道如何解决。错误：$(...)DataT... 查看详情
在 JQuery Datatable 中选择另一个页面后如何重绘 Datatable？
】在JQueryDatatable中选择另一个页面后如何重绘Datatable？【英文标题】：HowtoredrawDatatableafterselectinganotherpageinJQueryDatatable?【发布时间】：2017-04-1019:51:09【问题描述】：我有一个数据表，我用来自服务器端的数据填充。桌子正在以正... 查看详情
如何在 Primefaces DataTable 中使用 Font Awesome（或其他字体图标）而不是 jQuery sprite？
】如何在PrimefacesDataTable中使用FontAwesome（或其他字体图标）而不是jQuerysprite？【英文标题】：HowcanIuseFontAwesome(orotherfonticons)insteadofthejQueryspritesinPrimefacesDataTable?【发布时间】：2016-04-2316:55:28【问题描述】：我正在使用PrimeFaces生成... 查看详情
隐藏列后如何调整 JQuery/Datatable 的大小
】隐藏列后如何调整JQuery/Datatable的大小【英文标题】：HowtoresizeaJQuery/Datatableafterhidingcolumns【发布时间】：2011-07-0320:22:26【问题描述】：我正在使用JQuery的DataTables插件，我的问题基本上在于我的数据表有很多列并且（视觉上）超... 查看详情
jquery.datatable插件如何不自动加载数据?
参考技术A$(window).load(function()$('#managertable').dataTable("bServerSide":true,"bAutoWidth":true,"bStateSave":false,//保存状态到cookie******很重要，当搜索的时候页面一刷新会导致搜索的消失。使用这个属性设置为true就可... 查看详情
如何将 JQuery Datatable.net 与 ASP.Net 4 Razor 和 Twitter Bootstrap 一起使用
】如何将JQueryDatatable.net与ASP.Net4Razor和TwitterBootstrap一起使用【英文标题】：HowtouseJQueryDatatable.netwithASP.Net4RazorandTwitterBootstrap【发布时间】：2013-05-2210:28:39【问题描述】：我想将jQueryDatatable与ASP.netMVC和Twitter引导程序一起使用。有... 查看详情
如何将附加参数传递给 jQuery DataTable ajax 调用？
】如何将附加参数传递给jQueryDataTableajax调用？【英文标题】：HowdoIpassadditionalparameterstothejQueryDataTableajaxcall?【发布时间】：2016-02-0721:38:43【问题描述】：加载jQueryDataTable时，我的代码如下所示。如何将附加参数传递给AJAX调用？... 查看详情
如何根据列值对每一行显示复选框 - JQuery DataTable
】如何根据列值对每一行显示复选框-JQueryDataTable【英文标题】：HowtoshowCheckboxagainsteachRowbasedonColumnvalue-JQueryDataTable【发布时间】：2020-09-0909:15:15【问题描述】：我使用下面的代码在JqueryDatatable中显示复选框。vartable=$(\'#example\').Da... 查看详情