对特定列进行排序不起作用 - jquery Datatables

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 无法识别该分配，我不得不通过 DataTables api cell.data()“真正地”分配数据，这要感谢 @samabcde。

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

columnDefs的targets中指定的索引不正确，因为你有15列，并且索引从0开始，第15列的索引应该是14。这会导致以下js错误：

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

然后使订购不起作用。解决这个问题后，表格排序应该没问题了。

检查此js fiddle 以获得工作表。