Question

我正在使用这个jQuery插件：DataTables来管理这些表的表和分页。

我正在尝试导航到row所在的页面（按ID查找行）我找到了一个名为fnDisplayRow的插件，但我真的不知道如何使用它。这是我到目前为止所写的内容（这允许我在点击它时突出显示一行）

我现在要做的是点击<a href=#rowId> Id </a> 我想更改行的颜色，如果它不在第一页，则导航到其页面..

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

Answer 1

page.JumpToData（）通过搜索列中的数据来跳转到页面

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;
} );

使用如下：

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

参考：page.JumpToData()

Answer 2

我建议您检查行选择LINK

这适用于row().scrollTo() LINK

Answer 3

哦，这是一个有趣的！

我尝试使用@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");
      }
    });
  });
});

使用JSFiddle here。我需要看一下scrollTo()，因为这看起来也很有趣。

导航到行页面并突出显示该行

3 个答案: