2

I am currently using DataTables as a component of my page. However I would really like to be able to query and highlight a particular row. At the moment I am using scrollTo() from the Scroller add-on. However this requires me to turn pagination off, and also isn't particularly accurate when the row heights differ.

In the usual use case I will have a dozen columns and a few 10,000s of rows, so any solution needs to be pretty efficient. I'm not fully happy with DataTables so I'm open other table implementations. I do need the

  • Sorting by column
  • Searching with simultaneous filtering
  • Pagination
  • Programatically locating and jumping to a highlighted row

parts of DataTable though, but also not to bloat the table with excess features like in Handsontable. I'd be grateful for any suggestions for table libraries that you think might meet my requirements, I just don't have the time to play around with the fifty or so libraries out there at the moment.

EDIT: Added links to what I'm using.

shians
  • 955
  • 1
  • 6
  • 21
  • Off topic due to : "*Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.*" – davidkonrad Apr 28 '17 at 04:21
  • Modifying **https://datatables.net/plug-ins/api/page.jumpToData()** to jump to a row index and highlight the row should be extremely easy, if jumping to particular data not is enough. – davidkonrad Apr 28 '17 at 04:23
  • Thanks that may be exactly what I need. – shians Apr 28 '17 at 04:26

1 Answers1

3

You'll need the JS plug-in from this jumpToData page, with this code. Here is a modified JSFiddle, with the buttons in it. Use these buttons:

HTML

<button data-name="Donna Snider">Donna Snider</button>
<button data-name="Paul Byrd">Paul Byrd</button>
<button data-name="Sonya Frost">Sonya Frost</button>

JS

$(function() {
    var table = $('#example').DataTable({
        responsive: true
    });

    $('button').on('click', function() {
        let name = $(this).attr('data-name');
        table.page.jumpToData(name, 0);
    });
});
Clomp
  • 3,168
  • 2
  • 23
  • 36
  • Thanks, at the moment the performance isn't an issue with DataTables, though scrolling accuracy is a bit off using scrollTo. I'm actually more interested in a paginated solution because I think it is cleaner, but turning on pagination in DataTables removes my ability to jump to a desired row. – shians Apr 28 '17 at 04:07
  • When you're referring to DataTables, is this what your using? https://www.datatables.net If you have a JS Fiddle of something that's mocked up, maybe I could see what's wrong with the code & point out some tips on how to make the jump to row feature work. – Clomp Apr 28 '17 at 04:09
  • Yes it is, and it's very close to perfect for my usage but I feel a bit at the mercy of the available plugins for additional features. It's not that my jump to row doesn't work, it's that I can only do it through the https://datatables.net/extensions/scroller/ plugin, which only works when my table is configured to scroll rather than paginated. – shians Apr 28 '17 at 04:13
  • The beauty of jQuery is that it's a convenient wrapper for native JS. With a little know-how in either of those, you can hack it & enhance it. It's very easy to perfect it & make it work the way that you want it to work. :) Do you have a starter code example? It doesn't have to be your actual code. It could just be a mock up. Or the API configuration which you started with, so it could be recreated in something like: http://www.JSFiddle.net – Clomp Apr 28 '17 at 04:16
  • I guess I'll borrow one from the top google results: http://jsfiddle.net/ryanoc/ebRXw/. In this example I may want to programatically change the page to show "Paul Byrd". I do have ideas on how to hack it in myself but I'd much rather rely on provided API solutions. – shians Apr 28 '17 at 04:21
  • Oh I see. You're wanting to jump across the pagination from page 1 to highlight a row on page 4. What I initially noticed is that all of the data is available on page load & it's not loading additional data via Ajax, when the Next button is clicked on. So that's good! Let me look at it some more.... – Clomp Apr 28 '17 at 04:26
  • I think @davidkonrad's suggestion of https://datatables.net/plug-ins/api/page.jumpToData() will be the way to go. Given the whole plugin is 10 lines of code I can probably extend it to what I want. – shians Apr 28 '17 at 04:29
  • 1
    Here is the JSFiddle for it: http://jsfiddle.net/briankueck/rf6q9g45/ That's exactly what I was using too. Just make sure to add that .js file & look at the code in my buttons. – Clomp Apr 28 '17 at 04:41
  • So why didnt you mention that in the first place, instead of suggesting all kind of alternatives to dataTables itself ...? And where is the **highlighting** of the row? – davidkonrad Apr 28 '17 at 04:57
  • @davidkonrad Because the OP didn't have any links in it & it wasn't 100% clear as to what he wanted to do. At first it sounded like he wanted to switch libraries. After exploring what the real problem was, I had to find the DataTables library & ask him if that was the code which he was trying to use. Then I could work on the code. I had already built it with that plug-in, when it was simultaneously mentioned. I was about to edit my post & include the code samples. – Clomp Apr 28 '17 at 05:01
  • I didn't highlight the rows using jQuery, as he was looking for an API based solution to the jump first. There are 280 search results here on highlighting rows with DataTable, for some light perusing :) https://datatables.net/q/highlighting%20row – Clomp Apr 28 '17 at 05:05