没有 ajax 调用的数据表 draw()

Question

我正在尝试调整 jquery 数据table 的大小以适应屏幕大小。 Datatables 在服务器端模式下运行 (属性 "serverSide": true)。当 window 大小改变时，我重新计算新数据 table 的高度，然后调用 draw(false) 重新绘制数据 table 的布局。

不幸的是，draw() 方法进行了 ajax 调用，这使得解决方案无法使用，因为它显示 "processing" 并且需要时间来获取每个小 [=25] 的数据=] 改变。

如何在不调用 AJAX 的情况下重绘数据 table 的布局？我不需要刷新数据，我只想重绘 table.

Answer 1

据我了解，您正在为 "Datatables" 或基于客户端 window 宽度/高度的任何其他页面元素进行服务器端重新计算。对吗？在后端或服务器端执行此操作毫无意义，但在客户端执行此操作！

已经有很棒的客户端 css 框架，如果您稍微更改来自服务器的 html 标记，它们会自动为您执行此操作。它会在任何屏幕上呈现得很好和客户端的分辨率（这里的客户端是桌面、移动、平板电脑浏览器）

我建议查找更多信息，尤其是有关此框架的示例部分。

http://getbootstrap.com/

我建议看一下表格部分和这个 class 我认为这会有所帮助：.table-responsive

http://getbootstrap.com/css/#tables

hth, kreso

Answer 2

我将 table.draw(false) 的调用替换为 table.columns.adjust()。它在没有调用 AJAX 的情况下以新的高度和宽度呈现 table，因此问题已为我解决。但是，很高兴知道在服务器端模式下无需 AJAX 调用即可呈现数据表的正确方法。

Answer 3

我遇到了同样的问题。我用假 AJAX 响应解决了它。下面是一些代码来展示它是如何工作的：

变量：

var skipAjax = false, // flag to use fake AJAX
    skipAjaxDrawValue = 0; // draw sent to server needs to match draw returned by server

数据表AJAX定义：

ajax: {
    url: ajaxURL,
    type: 'POST',
    data: function(data) { //this function allows interaction with data to be passed to server
        if (skipAjax) { //if fake AJAX flag is set
            skipAjaxDrawValue = data.draw; //get draw value to be sent to server
        }

        return data; //pass on data to be sent to server
    },
    beforeSend: function(jqXHR, settings) { //this function allows to interact with AJAX object just before data is sent to server
        if (skipAjax) { //if fake AJAX flag is set
            var lastResponse = dataTable.ajax.json(); //get last server response
            lastResponse.draw = skipAjaxDrawValue; //change draw value to match draw value of current request

            this.success(lastResponse); //call success function of current AJAX object (while passing fake data) which is used by DataTable on successful response from server

            skipAjax = false; //reset the flag

            return false; //cancel current AJAX request
        }
    }
}

使用方法：

skipAjax = true; //set the fake AJAX flag

dataTable.draw('page'); //call draw function of a DataTable requesting to re-draw just the current page

没有 ajax 调用的数据表 draw()

Datatables draw() without ajax call

jquery

ajax

datatables

datatables-1.10