How to jump to a specific row

pchDatatables · January 2019

I am very new here and want to be able to load a table and jump to a specific row based on a unique value that is in a column of the table. I can't figure how to do that.

kthorngren · January 2019

You can use the row().show() plugin. Here is an example:

http://live.datatables.net/gefemike/2/edit

Kevin

pchDatatables · January 2019

This is great, thanks. Is there a way to have that run when the table loads rather than clicking a button?

kthorngren · January 2019

You can put it in the initComplete option or the init event. The button is simply for demo purposes.

Kevin

pchDatatables · January 2019

Still note getting it. I tried implementing a simple initComplete and it breaks the table. If I can get the alert then I would replace with your code for the search

$(document).ready(function() {
            $('#studiotabledisplay').DataTable( {
                "initComplete": function(settings, json) {
                    alert( 'DataTables has finished its initialisation.' );
                }
                
                dom: 'Bfrtip',
                paging: false,
                scroller: false,
                ordering: true,
                stateSave: true,
                stateDuration: 60 * 60 * 24 *7,
                order: [[ 2, "asc" ]],
                info: true,
                buttons: {
                    dom: {
                        button: {
                            tag: 'button',
                            className: ''
                            }
                        },
                    buttons: [
                        {extend:'excel', titleAttr: 'Download Excel Spreadsheet', text: '<i class="fas fa-table"></i>', className: 'btn btn-sm btn-primary' },
                        {extend:'pdf', titleAttr: 'Download PDF', text: '<i class="fas fa-file-pdf"></i>', orientation: 'landscape', className: 'btn btn-sm btn-primary' },
                        {extend:'print', titleAttr: 'Print', text: '<i class="fas fa-print"></i>', className: 'btn btn-sm btn-primary' },
                        {extend:'copy', titleAttr: 'Copy to Clipboard', text:'Copy', className: 'btn btn-sm btn-primary' }
                    ]                   
                }
            } );            
        } );

EDIT: Updated to use Markdown code formatting.

kthorngren · January 2019

Take a look at the browser's console and you will see some sort of syntax error. On line 5 above you need a comma terminating that option. I also added a sample of the code. Instead of using the table variable you will get an api instance and use that in-place of the table variable.

            $('#studiotabledisplay').DataTable( {
                "initComplete": function(settings, json) {
                    alert( 'DataTables has finished its initialisation.' );
                    var api = this.api();
                    var row = api.row(function ( idx, data, node ) {
                       return data[0] === 'Quinn Flynn';
                    } );
                    if (row.length > 0) {
                      row.select()
                      .show()
                      .draw(false);
                    }

                },   // comma goes here
                 
                dom: 'Bfrtip',

Updated my example with this code:
http://live.datatables.net/gefemike/5/edit

Kevin

pchDatatables · January 2019

Is there anything special that needs to be done to include the row.show plugin?
I keep getting row is not a function though the code is included right after the datatables.min.js is included and there is no error there

jquery-3.3.1.min.js:2 Uncaught TypeError: row is not a function
at w.fn.init.initComplete (admin_studios.php:90)
at datatables.min.js:115
at Function.map (jquery-3.3.1.min.js:2)
at r (datatables.min.js:115)
at ua (datatables.min.js:88)
at ha (datatables.min.js:88)
at e (datatables.min.js:132)
at b (datatables.min.js:112)
at Jb (datatables.min.js:113)
at HTMLTableElement.<anonymous> (datatables.min.js:132)

kthorngren · January 2019

jquery-3.3.1.min.js:2 Uncaught TypeError: row is not a function

Don't think this has to do with loading the row().show() plugin. Please post your Datatables init code so we can take a look.

Kevin

pchDatatables · January 2019

<script language="javascript">
        $(document).ready(function() {
            $('#studiotabledisplay').DataTable( {
               "initComplete": function(settings, json) {
                var api = this.api();
                var row = api.row(function ( idx, data, node ) {
                return data[1] === 'Gotta Dance_test';
                } );
                if (row.length > 0) {
                    row.select()
                    row().show()
                    .draw(false);
                    }
            },
                dom: 'Bfrtip',
                paging: false,
                scroller: false,
                ordering: true,
                stateSave: true,
                stateDuration: 60 * 60 * 24 *7,
                order: [[ 2, "asc" ]],
                info: true,
                buttons: {
                    dom: {
                        button: {
                            tag: 'button',
                            className: ''
                            }
                        },
                    buttons: [
                        {extend:'excel', titleAttr: 'Download Excel Spreadsheet', text: '<i class="fas fa-table"></i>', className: 'btn btn-sm btn-primary' },
                        {extend:'pdf', titleAttr: 'Download PDF', text: '<i class="fas fa-file-pdf"></i>', orientation: 'landscape', className: 'btn btn-sm btn-primary' },
                        {extend:'print', titleAttr: 'Print', text: '<i class="fas fa-print"></i>', className: 'btn btn-sm btn-primary' },
                        {extend:'copy', titleAttr: 'Copy to Clipboard', text:'Copy', className: 'btn btn-sm btn-primary' }
                    ]                   
                }
            } );
        } );
        </script>

kthorngren · January 2019

You have:

                if (row.length > 0) {
                    row.select()
                    row().show()
                    .draw(false);
                    }

The row() in the line row().show() doesn't belong there. Change it to look like my example:

        if (row.length > 0) {
          row.select()
          .show()
          .draw(false);
        }

Line 6 in your code (var row = api.row(function (.....) gets the Datatables row() API needed for row().show() and stores it in the var row.

Kevin

pchDatatables · January 2019

Excellent I have it working thank you!

Now new problem when I put it together with the

paging: false,

option it highlights the row but won't take the HTML code to that part of the page. My client wants one long table. Anyway to make it work on a long table?

<script language="javascript">
$(document).ready( function () {
    var table = $('#studiotabledisplay').DataTable( {

             "initComplete": function(settings, json) {
                var api = this.api();
                var row = api.row(function ( idx, data, node ) {
                   return data[1] === 'test';
                } );
                if (row.length > 0) {
                  row.select()
                  .show()
                  .draw(false);
                }

            },
            dom: 'Bfrtip',
            paging: false,
            scroller: false,
            ordering: true,
            stateSave: true,
            stateDuration: 60 * 60 * 24 *7,
            order: [[ 2, "asc" ]],
            info: true,

});

kthorngren · January 2019

option it highlights the row but won't take the HTML code to that part of the page. My client wants one long table. Anyway to make it work on a long table?

That was easier than I thought Found this article:
http://www.robertprice.co.uk/robblog/using-jquery-to-scroll-to-an-element/

Applied it to our example:
http://live.datatables.net/popeseha/1/edit

Of course you can reduce or eliminate the animation.

Kevin

pchDatatables · January 2019

Kevin,
This was exactly what I needed. Thank you!!!!

Joel

How to jump to a specific row

How to jump to a specific row

Answers

Howdy, Stranger!

Categories

DataTables

How to jump to a specific row

How to jump to a specific row

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables