How to jump to a specific row

pchDatatables

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

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

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

Kevin

pchDatatables

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

kthorngren

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

Kevin

pchDatatables

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

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

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

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

<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

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

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

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

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

Joel