Auto-select based on URL parameter

etilley

Hi,

This is probably very easy, but I can't find the right info to make this work.

I want to select a certain row of my datatable based on the value of a URL GET parameter given to the page as it returns from a flask call. I am using a button to add and delete records from the table

getting the unique search parameter is easy:
var <parameter> = url.searchParams.get("<parameter>")

But how do I use this value to find the row with a specific data.id = <parameter> ,and then "select" it?

There are examples here on the forums - http://live.datatables.net/sadupuwe/1/edit, but this appears more complicated than I need, and the example doesn't highlight the selected row as a mouse click would.

$(document).ready(function() {
    var table = $('#example').DataTable( {
      "ajax": {
        url: "/ajax/objects.txt",
        dataSrc: function (data) {
            console.log('dataSrc');
            return data.data;
            }
        },
        "columns": [
            { "data": "id" },
            { "data": "salary" }
        ],    
      initComplete: function(settings, json) {
        table.column( 'data:id' ).data().sort().unique().each( function ( value ) {
                   selectField.append( $('<option value="'+value+'">'+<intURLparameter>+'</option>') );
        } );

Kind regards,
etilley

kthorngren

See if the page.jumpToData() or the row().show() plugins do what you want.

Kevin

etilley

The jumptoData looks right but it doesn't add class 'selected' to the row it jumps to, is best practice to add the same logic as the default 'onclick' function? ...

as follows:

var table = $('#indexes2').DataTable({
          "ajax": {
              // "url": "static/objects2.txt", // This works for the static file
              "url": "/index_list", // This now works too thanks to @kthorngren
              "dataType": "json",
              "dataSrc": "",
              "contentType":"application/json"
          },
          "columns": [
              {"data": "id"},
              {"data": "code"},
              {"data": "label"},
              {"data": "description"},
              {"data": "score"},
              {"data": "sheetscore"},
              {"data": "username"}
          ],
          "select": {
            style: 'single'
          }

      });

if (urlParams.has('indidOpen')) { 
      table.page.jumpToData( window.mainind , 0 ); 
      table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
}

 $('#indexes2 tbody').on( 'click', 'tr', function () { ...

kthorngren

You can use row() or rows() with a row-selector as a function to get the row or rows that match the parameter data then chain the select() API to select the returned rows.

Kevin

etilley

Are any working examples here on the forum? I noticed https://datatables.net/forums/discussion/42712 had the same question without luck.

table.page.jumpToData( <intURLvalue> , 0 );  // this gives the page
table.row(':eq(0)', { page: 'current' }).select();  // this needs the row# / eq(#) on this page

The row() command will select() as I need, but after a jumpToData() I will be on the right page but have no way to know which row #, "eq(0)", contains my URL-passed column(0) integer.

My id could be 857 for example, but how do I select that row on the current page that jumpToData has jumped to?

It feels like I also need a simple "table.query_page(<intURLvalue>, 0), select();" or similar, function ....

kthorngren

Here is an old example I have. It uses row().show() to jump to the page and it uses the row-selector as a function to select the row:
http://live.datatables.net/hatojihe/3/edit

If you prefer the other plugin you can still use the row-selector as a function for the row selection.

Kevin