Как выбрать строку в Jquery Datatable - PullRequest
9 голосов
/ 23 ноября 2011

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

"oTableTools": {
               "sRowSelect": "single",

               "fnRowSelected": function ( node ) {
                   var s=$(node).children();
                       alert("Selected Row : " + $s[0]);
                   }

Я пытался sRowSelect и fnRowSelected, но не повезло. Строка не подсвечивается и не вызывается ни fnRowSelected. Даже без ошибок на консоли.

Вот мой полный код

  var userTable = $('#users').dataTable({
            "bPaginate": true,
            "bScrollCollapse": true,
            "iDisplayLength": 10,
            "bFilter": false,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "oLanguage": {
                "sLengthMenu": "Display _MENU_ records per page",
                "sZeroRecords": "Enter a string and click on search",
                "sInfo": "Showing _START_ to _END_ of _TOTAL_ results",
                "sInfoEmpty": "Showing 0 to 0 of 0 results",
                "sInfoFiltered": "(filtered from _MAX_ total results)"
            },
            "aaSorting": [[ 0, "asc" ]],
            "aoColumns": [/* Name */ null,
                          /*Institution*/null,
                          /*Email*/null],
           "oTableTools": {
               "sRowSelect": "single",

               "fnRowSelected": function ( node ) {
                 alert("Clicked");
                   }
           }       
        });    

Я что-то упустил?

EDIT:
Теперь можно выделить выделенную строку. Добавлен class = "display" в таблицу HTML. Все еще удивляюсь, почему я не нашел это в документах с данными. Теперь смотрим, как собирать выбранные значения.

Ответы [ 4 ]

5 голосов
/ 24 ноября 2011

Вот как я это делаю

просто добавьте эту функцию на свою страницу (если у пользователя идентификатор вашей таблицы)

$("#users tbody").delegate("tr", "click", function() {
var iPos = userTable.fnGetPosition( this );
if(iPos!=null){
    //couple of example on what can be done with the clicked row...
    var aData = userTable.fnGetData( iPos );//get data of the clicked row
    var iId = aData[1];//get column data of the row
    userTable.fnDeleteRow(iPos);//delete row

}
3 голосов
/ 24 марта 2014

Когда вы используете fnRowSelected (т.е. при создании нового tabletool), вы должны использовать

"sRowSelect": "multi", 

Это решит проблему.Пожалуйста, увеличьте количество комментариев, если это поможет.Мне нужно больше очков.

Я использовал его в своем коде следующим образом

    pqrtbl = new TableTools(NameOfTbl, { "sRowSelect": "multi",
                                        "fnRowSelected": function ( node ) {
                                            var s= $(node).children();
                                            fnAddToSelLst(s[1].innerText); 
                                        },.......................

//column index depend upon your req.
0 голосов
/ 09 мая 2015

Если вы хотите выбрать несколько строк, хотите получить данные выбранной строки для целей ajax, отметьте это

http://jsfiddle.net/ezospama/1/

Код DataTable будет следующим:

$(document).ready(function() {
    var table = $('#datatable').DataTable();

    $('#datatable tbody').on( 'click', 'tr', function (){
        $(this).toggleClass('selected');
    } );

    $('#btn').click( function () {
        console.log(table.rows('.selected').data());
        alert("Check the console for selected data");
    } );
})
0 голосов
/ 23 ноября 2011

Выбранный класс должен быть: В вашей функции вы использовали $s и определяете var s, который не является той же переменной.

"oTableTools": {
           "sSelectedClass": "yourclassname",
           "sRowSelect": "single",
           "fnRowSelected": function ( node ) {
               var s=$(node).children();
                   alert("Selected Row : " + s[0]);
               }
       }   
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...