Question

我只有JQUERY Datatable的HTML表数据源方法经验。所以我只是通过

来做

$("#mytable").datatable();

但是现在我有一张超过10000行的表。因此，当将插件应用于该表时，首先显示具有10000行的表，并且在应用插件之后发生分页，并且仅首先显示10行。但在此之前，每一行都显示使页面非常高，并且在移动浏览器中需要一些时间来应用插件。所以直到它完成用户可以查看所有行..这会导致一些麻烦..所以我想到了数据源的AJAX方式，我从服务器端获取了JSON对象。但是我的表应该就像每个单元格中都有一个HTML格式，或者每个单元格必须包含来自不同布局中同一行的多个值。

enter image description here

正如您所看到的第一列有一个复选框。第二列单元格具有HTML结构，其中第一行上的名称和第二行中的ID以及日期位于同一个框右侧，由 float分配：这个跨度的权利，它只有很少的跨度和一些其他标签。同样的方式也是第三列。那么我怎样才能实现这一目标，在同一列中显示多个值，并且必须遵循我现在的HTML布局。

Answer 1

如果转向AJAX过于激烈，主要关注的是DOM <table>的初始高度，您可以随时隐藏表并在实例化时显示dataTable。这样<table>只会在成为dataTable时占用空间。

#example {
    display: none;
}

$("#example").dataTable().show();

演示 - ＆gt;的 http://jsfiddle.net/tyevzmjz/

Answer 2

我认为使用ajax加载你的表将是最好的方案，你可以在放置返回的json的结构时控制返回的结果，你也可以使用这个片段制作复选框列：

"sName": "FieldName", "mRender": function (data, type, full) {
                    if (data === "True") {
                        return '<input type=\"checkbox\" checked value="' + data + '">';
                    } else {
                        return '<input type=\"checkbox\" value="' + data + '">';
                    }
                }

其中data是从json返回的值

使用Ajax

2 个答案: