Question

我在对数据表重新排序的最后一列（列索引15 ）有问题。即使没有声明对该列禁用的排序，我似乎也无法以编程方式进行排序，甚至无法手动进行排序。我的其他专栏排序很好。

 <table id="tblRequestLoaLedger" class="table table-bordered table-striped table-hover table-condensed w-100">
     <thead class="table-info text-center justify-content-center">
         <tr>
             <th scope="col" class="pl-1 pr-1">Options</th>
             <th scope="col" class="pl-1 pr-1">Issue LOA</th>
             <th scope="col" class="pl-1 pr-1">Discussions</th>
             <th scope="col">Request No.</th>
             <th scope="col">Date Requested</th>
             <th scope="col">Date Availed</th>
             <th scope="col">Member ID</th>
             <th scope="col">Member Name</th>
             <th scope="col">Hospital | Clinic</th>
             <th scope="col">Account Name</th>
             <th scope="col">Status</th>
             <th scope="col">LOA No.</th>
             <th scope="col">Approved Amount</th>
             <th scope="col">Reason</th>
             <th scope="col">LOA Code</th>
             <th scope="col">Has New Msgs</th>
         </tr>
     </thead>
      <tbody>
          <tr role="row" class="odd">
              <td class="text-center">
                  <div class="dropdown">
                      <button class="btn btn btn-outline-info btn-secondary dropdown-toggle dropdown-toggle-ellipsis" type="button" id="dropdownRLoaOpt" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                          <a class="dropdown-item" href="javascript:void(0);" onclick="GetImages(4579);">View Images</a>
                          <a class="dropdown-item" href="javascript:void(0);" onclick="GetMemberProfile(64378);">View Member's Profile</a>
                      </div>
                  </div>
              </td>
              <td scope="row" class="text-center">
                  <a class="btn btn btn-outline-info btn-circle" href="javascript:void(0);" onclick="GetLOAAvailmentDetails(4579);">
                      <i class="fa fa-file" aria-hidden="true"></i>
                  </a>
              </td>
              <td class="text-center" data-order="0">
                  <a class="btn btn btn-outline-info btn-circle" href="javascript:void(0);" onclick="GetMsgsRequestLOA(4579, 64378, 'ADVENTO, NANETH', this);">
                      <i class="fa fa-comments"></i>
                      <span class="badge badge-danger ml-1"></span>
                  </a>
              </td>
              <td class="">04579</td>
              <td class="text-center">09/06/2018</td>
              <td class="text-center">09/06/2018</td>
              <td class="text-right">86761-00</td>
              <td class="text-nowrap">ADVENTO, NANETH</td>
              <td class="text-nowrap">A. ZARATE GENERAL HOSPITAL</td>
              <td class="text-nowrap">ACCONA GENERAL MERCHANDISE</td>
              <td class="text-center align-middle"><span class="badge badge-secondary">CANCELLED</span></td>
              <td></td>
              <td class="text-right">0.00</td>
              <td></td>
              <td>4580</td>
              <td class="sorting_1">0</td>
          </tr>
      </tbody>
  </table>

JavaScript

$(document).ready(function () {
    InitTblRequestLoa();
    TblRequestLoaActions();

    $('#aNewMsgs').on('click', function () {
        $('#fDateReq').val('');
        $('#fDateReqTo').val('');
        InitTblRequestLoa().order([15, 'desc']).draw();
    });
});

function InitTblRequestLoa() {
    return $('#tblRequestLoaLedger').DataTable({
        retrieve: true,
        dom: "<'row'<'col-12't>>" +
            "<'row'<'col-6'i><'col-6'l>>" +
            "<'row'<'col-12'p>>",
        order: [[3, 'desc']],
        language: {
            emptyTable: 'No data available'
        },
        columnDefs: [
            {
                targets: [0, 1, 2],
                orderable: false

            },
            {
                targets: [14],
                visible: false
            },
            {
                targets: [15],
                type: 'num'
            }
        ]
        ,
        stateSave: true,
        stateSaveCallback: function (settings, data) {
            var api = new $.fn.dataTable.Api(settings);
            localStorage.setItem(api.table().node().id, JSON.stringify(data));
        },
        stateLoadCallback: function (settings, callback) {
            var api = new $.fn.dataTable.Api(settings);
            try {
                return JSON.parse(localStorage.getItem(api.table().node().id));
            } catch (e) { }
        }
    });
}

如您所见，我尝试将列类型指定为num，但仍然没有运气。有什么解决办法吗？

已解决

DataTables在排序Has Msgs列时遇到麻烦，因为我试图使用此行将数据分配给单元格：

$(thisRow).find('td:nth-child(15)').html("1");

结果证明DataTables无法识别该分配，由于@samabcde，我不得不通过DataTables API free-spacing“真正”分配数据。

tblRequestLoaLedger.cell(rowIndex, 15).data('1');

Answer 1

列索引以0开头，因此您的最后一列将为14。

只需更改columnDefs这样

columnDefs: [
        {
            targets: [0, 1, 2],
            orderable: false

        },
        {
            targets: [13],
            visible: false
        },
        {
            targets: [14],
            type: 'num'
        }
    ],

Working Fiddle

Answer 2

您在drawLine()的{{1}}中指定的索引不正确，因为您有15列，并且索引从0开始，第15列的索引应为14。这将导致以下js错误：

TypeError：无法设置未定义的属性'_DT_CellIndex'。

然后使订购无效。解决此问题后，表排序应该没问题。

在此js fiddle上找到工作表。

在特定列上的排序不起作用-jQuery Datatables

已解决

2 个答案: