如何将多个jquery dataTable放在一个页面中？

Question

我想用jquery dataTables来展示一些东西.

当我只将一个dataTable放在一个页面中,然后我再添加一个,但它们占据了几乎相同的位置,其中一个不能正常工作时,它运行良好.

你知道怎么处理吗？

Answer 1

http://www.datatables.net/examples/basic_init/multiple_tables.html

Answer 2

<table id="table1" class="display"> </table>
<table id="table2" class="display"> </table>
<table id="table3" class="display"> </table>

$(document).ready(function() {
  $('table.display').DataTable();
} );

只要您给出正确的类，所有三个表都会显示

<-- 你写的是 dataTable 而不是 DataTable-->

Answer 3

可以通过服务器端处理.我在我的应用程序中的许多位置工作.您只需要多次按照服务器端处理的示例代码进行操作......

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "../examples_support/server_processing.php"
    } );
} );

更换#example用#id-of-your-table和"sAjaxSource": "../examples_support/server_processing.php"用"sAjaxSource": "url/to/your/server/side/script".

我的猜测是你使用.dataTable了多表示例中的选择器.这将使用dataTable类对所有表应用相同的设置.

Answer 4

我迟到了，但这是我最终用来解决你描述的问题的方法......

$('.testDataTable').each(function() {
        var dataSource = $(this).attr("data-ajaxsource");
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": dataSource
    });
});

您实际上是在遍历您的 DataTable 实例并添加由数据属性设置的源。如果您不熟悉数据属性，它们只是应用于元素的标签......

<div id="testDataTable" data-ajaxsource="http://myserver.com/json"></div>

或者，如果您不想使用 HTML5 数据属性，则可以使用父项中的隐藏字段，该字段可以直接读入 sAjaxSource ...

$('.testDataTable').each(function() {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": $(this).children('childElement').html()
    });
});