不使用Ajax调用的Datatables draw()函数

Question

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

不幸的是，draw()方法会发起一个ajax请求，这使得这个解决方案无法使用，因为它会显示"processing"并在每次小窗口更改时需要时间获取数据。

如何在不调用AJAX的情况下重绘datatables布局？我不需要刷新数据，我只想重新绘制表格。

- Sergey Zhukov

Answer 1

我将调用table.draw(false)替换为table.columns.adjust()。这样可以在不进行AJAX调用的情况下使用新的高度和宽度呈现表格，所以我的问题得到了解决。但是，在服务器端模式下，想要知道正确的方法来呈现dataTables而不使用AJAX调用也是非常好的。

- Sergey Zhukov

Answer 2

我是一位有用的助手，可以为您进行翻译。以下是需要翻译的内容：

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

变量：

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

---

DataTable 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

- Maz T

---

行！我将那些skipAjax和skipAjaxDrawValue作为表格数据。$('#mytable').data('skipAjax', true) 等。 - Timo Kähkönen

Answer 3

据我所知，您正在为“Datatables”或任何其他基于客户端窗口宽度/高度的页面元素进行服务器端重新计算..对吗？这在后端或服务器端执行毫无意义，而应该在客户端执行！

已经有很棒的客户端CSS框架可以自动为您完成这项工作，只需稍微更改来自服务器的HTML标记即可..它将为任何屏幕分辨率和客户端（此处的客户端是指桌面、移动、平板电脑浏览器）呈现出色。

我建议您寻找更多信息，特别是关于这些框架的示例部分。

http://getbootstrap.com/

我建议您查看表格部分，并且这个类可能会有所帮助：.table-responsive。

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

- Kresimir Pendic

---

也许我的问题没有表达清楚：我不想在服务器端调整HTML布局，而是想在客户端重新绘制Datatables布局，但是Datatables以服务器端模式运行（属性“serverSide”=true）。我已经使用了带有datatables的bootstrap，我需要在不使用AJAX调用的情况下重新绘制它。 - Sergey Zhukov

第一次我没有很好地理解你的意思，如果你能发布你的绘图函数，我们可以更准确地帮助你 :) - Kresimir Pendic

你可以在 Github 上的 DataTables 库源代码中找到绘图函数。 - Sergey Zhukov