8

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

不幸的是，该draw()方法进行了 ajax 调用，这使得解决方案无法使用，因为它显示“正在处理”并且需要时间来获取每个小窗口更改的数据。

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

4

3 回答 3

8

table.draw(false)我替换了to的调用table.columns.adjust()。它在没有 AJAX 调用的情况下呈现具有新高度和宽度的表格，因此我解决了这个问题。但是，如果知道在服务器端模式下没有 AJAX 调用的情况下呈现数据表的正确方法，那就太好了。

于 2015-06-29T06:48:26.600 回答
6

我遇到了同样的问题。我用假的 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
于 2016-08-05T19:18:10.833 回答
-1

据我了解，您正在根据客户端窗口宽度/高度对“数据表”或任何其他页面元素进行服务器端重新计算。对吗？在后端或服务器端这样做是没有意义的，但在客户端这样做！

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

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

http://getbootstrap.com/

我建议看一下表格部分，我认为这可能会有所帮助：.table-responsive

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

hth，克雷索

于 2015-06-28T08:02:58.857 回答