CODEWITHSUNDEEP
jquerydatatables
Joey Pablo
Joey Pablo

Reputation: 327

navigate to row page and highlight the row

I am using this jQuery plugin : DataTables which manages tables and paging for those tables.

I'm trying to navigate to the page where my row is (find the row by Id) I've found a plugin named fnDisplayRow but I really don't know how to use it.. here's what i've wrote so far ( this allows me to highlight a row when i click on it )

what i would like to do now is when i click on <a href=#rowId> Id </a> I would like to change the color of the row and if it's not in the first page then navigate to its page.. 

$("#myTable").on('click','tr', function(){
    var id = otable.row( this ).id();
    $( this ).css('background-color','#ffff99');
    console.log(id);
});

Upvotes: 0

Views: 657

Answers (3)

Bettimms
Bettimms

Reputation: 671

page.JumpToData() Jump to a page by searching for data from a column

jQuery.fn.dataTable.Api.register( 'page.jumpToData()', function ( data, column ) {
    var pos = this.column(column, {order:'current'}).data().indexOf( data );

    if ( pos >= 0 ) {
        var page = Math.floor( pos / this.page.info().length );
        this.page( page ).draw( false );
    }

    return this;
} );

And use it as follows:

var table = $('#example').DataTable();
  table.page.jumpToData( "John Doe", 0 );

Reference : page.JumpToData()

Upvotes: 2

annoyingmouse
annoyingmouse

Reputation: 5689

Ohh, this was a fun one!

Here's my attempt using the suggestion from @Bettimms:

$(function() {
  var example01 = $("#example01").DataTable({
    columns: [{
      "visible": false
    }, {
      "render": function(d, m, r) {
        return $("<a></a>", {
          "class": "internal-link",
          "text": d,
          "href": r[0]
        }).prop("outerHTML")
      }
    }, {
      "render": function(d) {
        return (d.length > 25) ? d.substring(0, 25) + "..." : d;
      }
    }]
  });
  var example02 = $("#example02").DataTable({
    columns: [{
        "visible": false
      },
      null
    ]
  });
  $("#example01").on("click", ".internal-link", function(e) {
    e.preventDefault();
    var id = $(this).attr("href");
    example02.page.jumpToData(id, 0);
    example02.rows().iterator("row", function(context, index) {
      var data = this.row(index).data()
      if (data[0] === id) {
        $(this.row(index).node()).addClass("info");
      } else {
        $(this.row(index).node()).removeClass("info");
      }
    });
  });
});

With a working JSFiddle here. I need to look at scrollTo() next as that seems fun too.

Upvotes: 1

Yuri
Yuri

Reputation: 3284

I suggest you to check this for row selection LINK

And this for row().scrollTo() LINK

Upvotes: 1

Related Questions