dataTables.fixedColumns.min.js插件

时间:2019-09-15 14:37:03

标签: datatables

我对dataTables.fixedColumns.min.js插件有问题,不起作用,第一列未固定。 这是出现在浏览器中的错误

  

TypeError:a [h] [l]未定义

我注意到,当我使用sAjaxSource时不起作用,但是当我将定义的表与定义的数据一起使用时,此工作有效。 如何强制fixedColumns从sAjaxSource查看未定义的数据? 我也尝试过使用其他构造函数,但也不起作用:

"initComplete": function () {
      new $.fn.dataTable.FixedColumns( tabela_unknown );
  }     
<div class="box">
            <div class="box-header">
              <h3 class="box-title">Raport</h3>
            </div>
            <div class="box-body">
            <div class="table-responsive">
              <table id="unknown_driver_table" class="table table-bordered table-striped"   width="100%">
                <thead>
                <tr>
                      <tr>         
                      <th>Login</th>                              
                      <th>Name</th>         
                      <th>Surname</th>
                      <th>Incom IBN</th>
                      <th>Cash IBN</th>
                      <th>Pay IBN</th>
                       <th>Incom WRM</th>
                      <th>Cash WRM</th>
                      <th>Pay WRM</th>
                         <th>Incom CDY</th>
                      <th>Cash CDY</th>
                      <th>Pay CDY</th>
                        <th>Incom AHN</th>
                      <th>Cash AHN</th>
                      <th>Pay AHN</th>
                      <th>Pay FTR</th>
                      <th>Cash</th>
                      <th>Minus</th>
                      <th>Desc</th>
                      <th>Attach</th>
                      <th>Wypłata</th>
                      <th>City</th>
                      <th>Agr</th>
                      <th>Data start</th> 
                      <th>Data end</th> 
                    </tr>
                </tr>
                </thead>
              </table>        
              </div>
            </div>    
          </div> <!-- /.box-body --> 

JavaScript

$(document).ready( function () {
     var tabela_unknown = $('#unknown_person_table').DataTable({
            scrollY:        "500px",
            scrollX:        true,
            scrollCollapse: true,
            paging:         false,
             fixedColumns:   true,
            "searching": true,
            "sAjaxSource": "/upload/adm/getcurrentcalc",
            "sAjaxDataProp": "",
            "order": [[ 0, "asc" ]],
            "aoColumns": [
                  { "mData": "id_opus"},
                  { "mData": "name_drv" },
                  { "mData": "surname_drv" },
                  { "mData": "ubra_income" },
                  { "mData": "ubra_cash" },
                  { "mData": "bert_income" },
                  { "mData": "bert_cash" },
                  { "mData": "eaasd_income" },
                  { "mData": "kubra_income" },
                  { "mData": "kussd_income" },
                  { "mData": "mrtw_cash" },
                  { "mData": "vat_sum" },
                  { "mData": "c_fee" },
                  { "mData": "invoice_vat" },
                  { "mData": "calc_invoice" },
                  { "mData": "agreement_fee" },
                  { "mData": "cash_fee" },
                  { "mData": "minus" },
                  { "mData": "minus_description" },
                  { "mData": "sum_calculation" },
                  { "mData": "payment_sum"},
                  { "mData": "city"},
                  { "mData": "agree" },
                  { "mData": "start_d" },  
                  { "mData": "end_d" }
            ],
          "language": {
                        "sUrl": '/bower_components/datatables.net/pl.json'
                }
     }); 
});
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.bootstrap.min.css">

我注意到,当我使用sAjaxSource时不起作用,但是当我将定义的表与定义的数据一起使用时,此方法有效。定义表的示例:

<thead>
   <tr>
       <th>First name</th>
       <th>Last name</th>
       <th>Position</th>
       <th>Office</th>
       <th>Age</th>
       <th>Start date</th>
       <th>Salary</th>
       <th>Extn.</th>
       <th>E-mail</th>
   </tr>
 </thead>
 <tbody>
    <tr>
        <td>Tiger</td>
        <td>Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
        <td>5421</td>
        <td>t.nixon@datatables.net</td>
    </tr>
</body>

0 个答案:

没有答案