1

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

我认为我能做的（和不能做的）

"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

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

有什么帮助吗？

4

1 回答 1

1

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

As already discussed in the comments to the question, I tried to circumvent the default behaviour of DataTables to fit your needs and created an example on jsFiddle to show, including numbered-pagination and sorting.

Basically, you'll need to unbind the event-handlers, that the DataTables - plugin binds to it's components, like so:

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

Using .unbind without a parameter will unbind any event-listener on the element, so be careful when using this.

Gladly, the DataTables - API provides functions that let you call the internal paging and sorting-methods yourself, named fnSort (API-Link) and fnPageChange (API-Link).

To keep it simple, i just used a confirm - Box to ask for the user-interaction:

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

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

but all you'd need to do is call the DataTables-functions inside of your "Leave Page" - callback you already provided in the code.

Note: When it comes to the numbered buttons of the paging: It seems like DataTables regenerates those everytime the paging is changed, thus I need to unbind the event-Handlers again after every page-change.

The rest is simple yet not very elegant code, in which I just look for certain classes to know, what button was clicked or which state the sorting-header is in.

Excerpt:

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;
}
于 2013-03-12T22:19:01.210 回答