Jquery Datatables - сделать всю строку ссылкой

Question

Это может быть просто, но не могу понять это.Используя jquery datatables, как я могу сделать каждую строку кликабельной, чтобы просто ссылаться на обычную страницу?Поэтому, если кто-то наведет курсор мыши на какой-либо из рядов, вся строка будет выделена цветом и станет доступной для клика, и она будет ссылаться на любой URL-адрес, на который я хочу, чтобы он ссылался при нажатии.

Answer 1

Я использовал параметр fnDrawCallback плагина jQuery Datatables , чтобы он работал.Вот мое решение:

fnDrawCallback: function () {

  $('#datatable tbody tr').click(function () {

    // get position of the selected row
    var position = table.fnGetPosition(this)

    // value of the first column (can be hidden)
    var id = table.fnGetData(position)[0]

    // redirect
    document.location.href = '?q=node/6?id=' + id
  })

}

Надеюсь, это поможет.

Answer 2

$('#myTable').on( 'click', 'tbody tr', function () {
  window.location.href = $(this).data('href');
});

где #myTable - это идентификатор таблицы, и вам нужно поместить href в tr, например:

<tr data-href="page.php?id=1">
    <th>Student ID</th>
    <th>Fullname</th>
    <th>Email</th>
    <th>Phone</th>
    <th>Active</th>
</tr>

Answer 3

Это было сделано для меня с помощью обратного вызова строки.

fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
    responsiveHelper.createExpandIcon(nRow);
    $(nRow).click(function() {
        document.location.href = 'www.google.com';
    });
},

Answer 4

Это достаточно просто сделать с ванилью <table>, но я не понимаю, почему это не сработает и с jQuery DataTables.

$('#myTableId').on('click', 'tbody > tr > td', function ()
{
    // 'this' refers to the current <td>, if you need information out of it
    window.open('http://example.com');
});

Возможно, вам понадобятсяhover обработка событий там, чтобы дать пользователям визуальную обратную связь, прежде чем они нажмут на строку.

Answer 5

Вы также можете использовать плагины DataTables api , которые позволяют создавать собственные средства визуализации.

Answer 6

** Я использовал для этого простое решение. Добавьте onclick на tr и все готово. Проверено с помощью jquery datatable **

<tr  onclick="link(<?php echo $id; ?>)">



function link(id){
  location.href = '<?php echo $url ?>'+'/'+id;
   }

Answer 7

Я думаю, что так будет

$('#invoice-table').dataTable({
        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            var slug = $(nRow).data("slug");
            $(nRow).attr("href", "/invoices/" + slug + "/");
            $(nRow).css( 'cursor', 'pointer' );
            $(nRow).click(function(){
                window.location = $(this).attr('href');
                return false;
            });
        }
    });

И строка таблицы вот так

<tr class="invoice_row" data-slug="{{ invoice.slug }}">
                                <td>{{ invoice.ref }}</td>
                                <td>{{ invoice.campaign.name }}</td>
                                <td>{{ invoice.due_date|date:'d-m-Y' }}</td>
                                <td>{{ invoice.cost }}</td>
                                <td>

                                        <span class="label label-danger">Suspended</span>
                                </td>

                            </tr>

Со мной все работало нормально

Answer 8

Вы можете сделать это, чтобы сделать строку кликабельной:

<script type="text/javascript">
var oTable;
    $(document).ready(function() {
        oTable = $('#myTable').dataTable({
            "ajax" : "getTable.json",
            "fnInitComplete": function ( oSettings ) {
                //On click in row, redirect to page Product of ID
                $(oTable.fnGetNodes()).click( function () {
                    var iPos = oTable.fnGetPosition( this );
                    var aData = oSettings.aoData[ iPos ]._aData;
                    //redirect
                    document.location.href = "product?id=" + aData.id;
                } );
            },
            "columns" : [ {
                "data" : "id"
            }, {
                "data" : "date"
            }, {
                "data" : "status"
            }]
        });
    });
</script>


<table id="myTable" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>#</th>
            <th>Date</th>
            <th>Status</th>
        </tr>
    </thead>
<tbody></tbody>
</table>

Answer 9

Очень круто: JS аддон здесь

И с помощью fnDrawCallback

  fnDrawCallback: function() {
    this.rowlink();
  },

Answer 10

Недавно мне пришлось столкнуться с выбором строки в таблицах данных.

$(document).ready(function() {
    $("#datatable tbody tr").live( 'click',function() {         
    window.open('http://www.example.com');

    } );
} );