Ordering on specific column not working - jquery Datatables

Question

I have a problem on my last column (column index 15) reordering on my datatable. Even when no disabled ordering on that column is declared, I can't seem to order it programmatically, yet even manually. My other columns are ordering just fine.

 <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) { }
        }
    });
}

As you can see, I have tried specifying the column type as num, and still no luck. Any solutions to this?

SOLVED

DataTables had trouble ordering Has Msgs column because I was trying to assign a data to a cell using this line:

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

Turns out DataTables doesn't recognize that assignment and I had to 'really' assign the data via the DataTables api, cell.data(), thanks to @samabcde.

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

MyTwoCents · Accepted Answer · 2018-12-07 06:10:50Z

2

Column index starts with 0 so your last column will be 14.

Just change columnDefs like this

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

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

Working Fiddle

answered Dec 7, 2018 at 6:10

MyTwoCents

7,6723 gold badges28 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matthew Miranda Over a year ago

Hi, @MyTwoCents!, please refer to my edited post as I have forgotten a column to include. (Sorry!)

samabcde · Accepted Answer · 2018-12-07 05:59:24Z

1

The index you specified in targets of columnDefs is not correct, since you have 15 columns, and the index start at 0, the index for 15th column should be 14. This cause the following js error:

TypeError: Cannot set property '_DT_CellIndex' of undefined.

Which then make the ordering not working. After fixing this problem, the table ordering should be fine.

Check this js fiddle for a working table.

answered Dec 7, 2018 at 5:59

samabcde

8,3043 gold badges30 silver badges47 bronze badges

7 Comments

Matthew Miranda Over a year ago

Hi, @samabcde! Thank you for your solution. Unfortunately, I seemed to forgot to include the LOA Code column (not visible), so there should be really 16 columns. And Has New Msgs column is still index 15 as well. Still not working though. I corrected and formatted my question. Sorry for this. Can you please look into it again?

samabcde Over a year ago

No problem is found after adding the column and change back the index. Check this.

Matthew Miranda Over a year ago

I have checked the fiddle, and yeah, it seems to be working fine. I am so confused as to what has gone wrong with my code. Do you have any idea where did I somehow go wrong?

samabcde Over a year ago

You may try to create a fiddle that reproduce the problem. It seems that the problem may be related to other part of your code, which you did not cover in the question.

samabcde Over a year ago

I think this really matter, you need to change the data of datatable also instead of changing the html only. See cell.data() for details.

|

Collectives™ on Stack Overflow

Ordering on specific column not working - jquery Datatables

SOLVED

2 Answers 2

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

SOLVED

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related