Pre-selecting a row and making sure its on the current page...

ChrisCwmbran

Hi all!

I'm fairly new to both JS and JQuery, and very new to this plugin, but I must say it rocks!

The one thing I haven't managed to work out how to do, is when the table is rendered, how do I select a specific row and make sure it's on the displayed table page?

Obviously I can add the "selected" class to the row when I render the HTML, but I have the feeling this isn't the correct solution. It feels like triggering a click on the specific row using JQuery might be better, but then how do I ensure the relevant page of the data is displayed?

Thanks in advance!

Chris.

kthorngren

See if the row().show() plugin is what you ware looking for:
https://datatables.net/plug-ins/api/row().show()

Kevin

ChrisCwmbran

Thanks for the link Kevin.

I had actually located this page but I'm not sure I fully understand how to use it. I found the example a bit confusing.

kthorngren

Here is an example I previously built to try it out:
http://live.datatables.net/hatojihe/3/edit

Click the button "Find Quinn". It uses the select extension to highlight the row. You can remove .select() if you don't want to highlight the row.

Kevin

ChrisCwmbran

Thank you! That I understand!

Although Im a little puzzled by why you have

.draw(false);

kthorngren

To stay on the current page. If I just had .draw(); Datatables would display the first page. This is documented in the draw() docs.

Kevin

ChrisCwmbran

I almost have this working perfectly now thanks to you!

The only problem is, if the value of variable `defaultReg' isn't in the table I get an error. Try as I might I cant get the code right to stop the error.

function display_table() {
    $.ajax({
        type: 'POST',
        url: "./includes/modules/sec0020v101/sec0020table.php",
        data: { registration: registration },
        success:function(data) {
            $('#sec0020div1')
                      .html(data);
            table = $('#sec0020table1')
                .DataTable({
                    select: {
                        style: 'single'
                    },
                    dom: 'Bfrtip',
                    buttons: [
                        'copyHtml5',
                        {
                            extend: 'excelHtml5',
                            orientation: 'landscape',
                            pageSize: 'A4',
                            exportOptions: {
                                columns: ':visible'
                            }
                        },
                        'csvHtml5',
                        {
                            extend: 'pdfHtml5',
                            orientation: 'landscape',
                            pageSize: 'A4',
                            exportOptions: {
                                columns: ':visible'
                            }
                        },
                        {
                            extend: 'print',
                            orientation: 'landscape',
                            pageSize: 'A4',
                            exportOptions: {
                                columns: ':visible'
                            }
                        },
                        'pageLength',
                        'colvis'
                    ],
                    lengthMenu: [
                        [ 10, 25, 50, -1 ],
                        [ '10 rows', '25 rows', '50 rows', 'Show all' ]
                    ]
                });
            if(defaultReg) {
                table
                    .row(function ( idx, data, node ) { return data[1] === defaultReg; } )
                    .select()
                    .show()
                    .draw(false);
                    $('#sec0020navigation').find('.button-disabled')
                        .addClass('button')
                        .removeClass('button-disabled');

            }
        }
    });
}

That is certain to be a limitation of my poor JavaScript rather than your excellent solution!

kthorngren

My approach would be to define defaultReg before the ajax call, for example:

function display_table() {
    var defaultReg;
    $.ajax({
    ......

This way the variable exists and you won't get the error defaultReg is not defined. Assuming that is the error you are getting.

Kevin

ChrisCwmbran

Sorry! I should have said the error is:

datatables.js:79211 Uncaught TypeError: Cannot read property 'nTr' of undefined
    at _fnDraw (datatables.js:79211)
    at _fnReDraw (datatables.js:79316)
    at _Api.<anonymous> (datatables.js:83209)
    at _Api.iterator (datatables.js:82789)
    at _Api.<anonymous> (datatables.js:83198)
    at _Api.draw (datatables.js:82957)
    at Object.success (index.php?page=emotiveretailstock&registration=TW63CTX:249)
    at u (jquery-3.3.1.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.3.1.min.js:2)
    at k (jquery-3.3.1.min.js:2)

So it seems to be when the .draw clause is called. Im assuming that because the .row function didn't find a row, it is perhaps undefined?

kthorngren

I see. I think this example change will help:
http://live.datatables.net/gefemike/1/edit

It tries to find the row first. If one is returned then it will show the row otherwise it does
nothing.

Using return data[0] === 'QuinnFlynn'; should result in no error and page 1 displayed. Changing to return data[0] === 'Quinn Flynn'; should show the page Quinn is on.

Kevin