Auto-select based on URL parameter

Auto-select based on URL parameter

etilleyetilley Posts: 31Questions: 4Answers: 0

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

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

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

    Kevin

  • etilleyetilley Posts: 31Questions: 4Answers: 0
    edited August 2020

    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 () { ...
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • etilleyetilley Posts: 31Questions: 4Answers: 0
    edited August 2020

    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 ....

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited August 2020

    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

This discussion has been closed.