2011-11-23 35 views
9

Estoy usando datatables en mi aplicación. Cuando el usuario haga clic en cualquier fila, quiero resaltarla y seleccionar algunos valores de la fila seleccionada.Cómo seleccionar una fila en la tabla de datos Jquery

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

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

me trataron sRowSelect y fnRowSelected pero no hubo suerte. La fila no se resalta y no se llama a fnRowSelected. Incluso ningún error en la consola.

Aquí está mi código completo

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

Me estoy perdiendo algo?

EDIT:
Ahora capaz de resaltar Clase seleccionada row.Added = "display" de tabla HTML. Todavía me pregunto por qué no encontré esto en documentos de datatable. Ahora buscamos cómo recopilar los valores seleccionados.

Respuesta

5

Aquí es cómo lo hago

sólo tiene que añadir esta función a su página (si los usuarios es su identificador de tabla)

$("#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 

} 
+0

gracias por dar una solución simple. Usé "$ (. Row_selected)" para buscar la fila seleccionada y luego filtré todos los datos de nuevo usando el selector de jquery. – xyz

0

La clase seleccionada debe ser, Dentro de su función usted usó $s y usted define var s que no es la misma var.

"oTableTools": { 
      "sSelectedClass": "yourclassname", 
      "sRowSelect": "single", 
      "fnRowSelected": function (node) { 
       var s=$(node).children(); 
        alert("Selected Row : " + s[0]); 
       } 
     } 
+0

¿Necesitamos aplicar nuestra propia clase a ' sSelectedClass'? – xyz

+0

No lo sé, pero debido a que hubo un error dentro de su función, es posible que se haya interrumpido el resaltado. – Niels

+0

Lo cambié, gracias. Verifica mi edición Todavía no está funcionando. – xyz

3

Cuando está utilizando fnRowSelected (es decir, cuando se crean nuevas tabletool) tiene que usar

"sRowSelect": "multi", 

Eso resolverá el problema. Por favor, incremente mi conteo de comentarios si esto ayuda. Necesito tener más puntos.

lo usé en mi código de la siguiente manera

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

//column index depend upon your req. 
0

Si quieres seleccionar múltiples filas, quiera conseguir los datos de la fila seleccionada para el propósito ajax comprobar esto

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

código DataTable ser como sigue

$(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"); 
    }); 
}) 
Cuestiones relacionadas