Answers

• kthorngren Posts: 22,299Questions: 26Answers: 5,127

  October 2

  I would look at using infoCallback for this. In the callback use order() to get the current ordering.

  Kevin
• allan Posts: 65,256Questions: 1Answers: 10,816 Site admin

  October 2

  It's a cool idea for a plugin that. You could listen for the info event and modify the info there.

  Another option, if you want a more visual representation of the applied sort is to use the plugin presented here.

  Allan
• allan Posts: 65,256Questions: 1Answers: 10,816 Site admin

  October 2 Answer ✓

  Its good practice for me to try little plugins now and then, so here is one which adds the column name to the info element: https://live.datatables.net/xatimufo/1/edit .

  You just need to add infoOrder to the initialisation options.

  Things to add: details about ordering direction, and support for multiple column ordering.

  Allan
• dbunge Posts: 7Questions: 2Answers: 0

  October 8

  I had to make some tweaks, as mentioned, but I now have a "Ordered by" working.

  $(document).on('preInit.dt', (e, ctx) => {
      let api = new DataTable.Api(ctx);
      let opts = api.init();
  
      if (opts.infoOrder) {
          api.on('info', (eInfo, eCtx, el) => {
              let order = api.order();
  
              if (!order.length) {
                  return;
              }
  
              let orderDir = order[0][1];
              if (orderDir != '') {
                  let span = document.createElement('span');
                  span.classList.add('dt-info-order');
                  span.textContent = 'Ordered by: ';
                  for (var x = 0; x < order.length; x++) {
                      let orderCol = api.column(order[x][0]);
                      let orderDir = order[x][1];
                      span.textContent += orderCol.title() + ' ' + orderDir + ',';
                  }
                  //cleanup end of text so no trailing space or comma
                  span.textContent = span.textContent.trim();
                  span.textContent = span.textContent.replace(/,+$/, '');
                  el.append(span);
              }
          });
      }
  });
  
  
• allan Posts: 65,256Questions: 1Answers: 10,816 Site admin

  October 8

  Good stuff! Here is my example updated with your plugin code.

  Thanks for sharing that with us.

  Allan