27

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

当我将一个数据表放在一页中时效果很好，然后我再添加一个，但它们几乎占据了相同的位置，其中一个效果不佳。

你知道如何处理吗？

4

8 回答 8

12 
<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-->

于 2014-11-07T08:52:17.363 回答
7

服务器端处理是可能的。我让它在我的应用程序的多个位置工作。您只需要多次遵循服务器端处理的示例代码...

$(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 类的所有表应用相同的设置。

于 2009-12-16T10:55:50.137 回答
5

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

$('.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()
    });
});
于 2013-01-25T00:04:09.367 回答
2

如果您在单个页面上有多个数据表 - 请检查您是否使用示例中的以下内容

"fnServerData": fnDataTablesPipeline

这会缓存第一次调用的数据；如果第二个数据表使用相同的函数，它将看到数据已经被提取，并且不会进行 ajax 调用来检索其数据。因此您将不会收到第二个（第 n 个）数据表的数据。

于 2011-02-10T12:54:50.307 回答
2

按类选择选择器我有两个或更多表，我希望使用一个配置来初始化所有关闭主题，您可以为所有表设置一个类，例如：

<table class="mytable">
<table class="mytable">
...
...
...

和初始化主题，例如：

    $('.mytable').DataTable({
        order: [[0, "desc"]],
        language: {
            "lengthMenu": "نمایش  _MENU_ ردیف در هر صفحه",
            "zeroRecords": "متاسفیم هیچ کاربری مطابق با اطلاعات درخواست شده یافت نشد",
            "info": "نمایش برگه _PAGE_ از  _PAGES_  از _TOTAL_  کاربر",
            "infoEmpty": "هیچ اطلاعاتی یافت نشد",
            "infoFiltered": "(فیلتر شده از _MAX_ کاربر)",
            "search": "جستجو:",
            "paginate": {
                "first": "نخست",
                "last": "آخرین",
                "next": "بعدی",
                "previous": "قبلی"
            },
        },
    })
于 2018-12-13T07:18:40.927 回答
2

这个答案的灵感来自（@TinkeringTurtle）这个线程中的一个答案。

let dt_columns = ["columns for table1", "columns for table2", "etc"];
let tables = [];
$('.table').each(function(i, el) {
    var dataSource = $(this).attr("data-ajaxsource");
    var columns = dt_columns[i];
     tables[i] = $(this).DataTable({
      "processing": true,
      "serverSide": true,
      "ajax": {
          "url": dataSource,
          "type": "POST",
          "data":{
            "month": function(){return $("#select_month").val()},
            "year": function(){return $("#select_year").val()},
          }
      },
      "columns": columns
    });
});
/* reload datatable */
$("#select_month, #select_year").change(function(){
  console.log(tables);
  tables.forEach(function(el, i){
    el.ajax.reload();
  });
});
于 2019-12-23T10:32:06.090 回答
1

仍在努力……但这可能会有所帮助

<div class="col-md-12">
          <!-- Custom Tabs -->
          <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">Web Design and Development</a></li>
              <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">Domain Registration</a></li>
              <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">Cloud Computing Services</a></li>
              <li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="false">Android application Development</a></li>
              <li class=""><a href="#tab_5" data-toggle="tab" aria-expanded="false">Web Hosting</a></li>
              <li class=""><a href="#tab_6" data-toggle="tab" aria-expanded="false">SEO and Online Marketing</a></li>
              <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="tab_1">
                <b>Web Deign and development hires:</b>




                <table class="table" id="webdesignTable">                   
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>



              </div>
              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_2">
              <b>Domain Registration</b>


              <table class="table" id="domainregistrationTable">                    
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>



              </div>
              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_3">
               <b>Cloud Computing</b>


              <table class="table" id="cloudcomputingTable">                    
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>
              </div>
              <!-- /.tab-pane -->

              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_4">
               <b>Android application Development</b>


              <table class="table" id="androidappTable">                    
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>
              </div>
              <!-- /.tab-pane -->

              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_5">
               <b>Web Hosting</b>


              <table class="table" id="webhostingTable">                    
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>
              </div>
              <!-- /.tab-pane -->

              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_6">
               <b>SEO and Online Marketing</b>


              <table class="table" id="seoTable">                   
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>
              </div>
              <!-- /.tab-pane -->
            </div>
            <!-- /.tab-content -->
          </div>
          <!-- nav-tabs-custom -->
        </div>

剧本

// global the manage tables 
var manageMemberTable;
//var tbl1 = $('#webdesignTable').DataTable( );

$(document).ready(function() {

     $('table.display').dataTable(); //focus here

    manageMemberTable = $("#webdesignTable").DataTable({
        "ajax": "webdesign_action/retrieve.php", //get data for your tables
        "order": []
    });

    domainregistrationTable = $("#domainregistrationTable").DataTable({
        "ajax": "domainregistration_action/retrieve.php", //get data for your tables
        "order": []
    });
//It continues
于 2017-03-29T06:53:24.500 回答
0

HTML 例如：

<table id="Table01" class="table"></table>
<table id="Table02" class="table"></table>
<table id="Table03" class="table"></table>
<table id="Table04" class="table"></table>

脚本如：

table01 = $("#Table01").DataTable({/* to do somthing... */});
table02 = $("#Table02").DataTable({/* to do somthing... */});
table03 = $("#Table03").DataTable({/* to do somthing... */});
table04 = $("#Table04").DataTable({/* to do somthing... */});
于 2018-12-17T03:16:04.260 回答