Question

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

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

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

Answer 1

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

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

Answer 3

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

如果您更改从服务器稍微更改的html标记，已经有很好的客户端css框架可以自动为您执行此操作...它将为任何屏幕分辨率和客户端提供极大的渲染（客户端在这里，桌面，手机，平板电脑浏览器）

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

http://getbootstrap.com/

我建议看一下表格部分和本课程，我认为可以提供帮助：.table-responsive

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

hth，kreso

数据表draw（）没有ajax调用

3 个答案: