Question

我们有许多jQuery DataTable都使用服务器端处理。我们有分页和排序设置，一切运行良好。在这些表中至少有一列复选框，允许选择行进行某种处理。我们想要确认用户是否希望在选中复选框时进行分页或排序。

我认为我能做什么（而且不能）

"fnPreDrawCallback" : function(table) {
    if (CullAddress.AddressIsChecked()) {
        var $warningDiv = $('div#pageWarning');
        var warningText = "One or more Addresses are selected for Excluding or Tagging.  Are you sure you wish to nvaigate away?";
        $warningDiv.find("div#pageWarningText").html(warningText);
        $warningDiv.dialog({
            resizable: false,
            height: "auto",
            width: "auto",
            modal: true,
            buttons: {
                "Leave Page": function () {
                    CullAddress.resetWarningText();
                    $warningDiv.dialog('close');
                },
                "Stay On Page": function () {
                    CullAddress.resetWarningText();
                    $warningDiv.dialog('close');
                    return false;
                }
            },

        });
    }
},

最初我认为这很简单，但现在，它变得有点沉重，而且我不确定正确的方法是什么。我正在尝试使用fnPreDrawCallback，最初我打算创建并显示一个jQueryUI对话框，并让按钮确定是否从回调中return false;因此保留在页面上，或允许页面/排序经历。

我现在明白javaScript不会那样工作。我怀疑我将不得不做以下事情，但在我遇到麻烦之前，我想问一下是否有更简洁（和可重复使用）的方法。

在fnPreDrawCallback中，获取属性以描述预期的设置页面/排序（例如offset，pageSize，sSortDir，iSortCol等）。
通过对话框确定是继续还是留在页面
使用上述属性构建数据表的GET以绕过fnPreDrawCallback

我是否需要这样做更困难？当然我不是第一个想要这样做的人，但对于我的生活，我可以找到一个例子，或者我无法弄清楚我应该搜索的关键词......

有帮助吗？

Answer 1

链接到工作示例：http://jsfiddle.net/6frQZ/3/

正如在问题评论中已经讨论的那样，我试图规避DataTables的默认行为以满足您的需求，并创建了一个示例on jsFiddle来显示，包括编号分页和排序。

基本上，你需要取消绑定事件处理程序，DataTables插件绑定到它的组件，如下所示：

$('.dataTables_paginate a').unbind();
$('.dataTables_wrapper thead th').unbind();

在没有参数的情况下使用.unbind将取消绑定元素上的任何事件侦听器，因此在使用时请小心。

很高兴，DataTables-API提供的功能可让您自己调用内部分页和排序方法，名为fnSort (API-Link)和fnPageChange (API-Link)。

为了简单起见，我只使用confirm - Box来询问用户互动：

var userInteraction = confirm("Do you really want to change the page?");

if(userInteraction){
    oTable.fnPageChange(dir);
    $('.dataTables_paginate span a').unbind();
}

但您需要做的就是调用代码中已经提供的"Leave Page"内部的DataTables函数。

注意：当涉及分页的编号按钮时：似乎DataTables每次更改分页时都会重新生成这些按钮，因此我需要在每次更改页面后再解除对事件处理程序的绑定

其余的是简单而不是非常优雅的代码，其中我只是查找某些类来了解，单击了什么按钮或者sort-header所处的状态。

摘录：

var dir = "",
    $this = $(this);

if($this.hasClass('previous')){
    dir = "previous";
}else if ($this.hasClass('next')){
    dir = "next";
}else if($this.hasClass('first')){
    dir = "first";
}else if($this.hasClass('last')){
    dir = "last";
}else{
    dir = parseInt($this.text(),10)-1;
}

DataTables：确认用户希望页面

我认为我能做什么（而且不能）

1 个答案: