web-dev-qa-db-fra.com

jQuery - datatables, comment obtenir l'id de colonne

Comment obtenir un identifiant de colonne dans le plug-in datatable pour jquery J'ai besoin d'un identifiant de colonne pour la mise à jour dans la base de données.

jquerydatatables
18
neko_ime

fnGetPosition

Obtenir les index de tableau d'un particulier cellule de son élément DOM. Meilleur utilisé en combinaison avec fnGetData ().

Paramètres d'entrée:

nNode: le nœud que vous voulez trouver le position du. Cela peut être soit un 'TR' ligne ou une cellule 'TD' de la table. Le Le paramètre de retour en dépend contribution.

Paramètre de retour:

int ou tableau [int, int, int]: si le nœud est une ligne de table (TR) puis le La valeur de retour sera un entier avec l'index de la ligne dans aoData objet. Si le noeud est une cellule de table (TD) alors la valeur de retour sera un tableau avec [aoData index row, column index (réduction des lignes masquées), colonne index (y compris les lignes cachées)].

Exemple de code:

$(document).ready(function() {
    $('#example tbody td').click( function () {
        /* Get the position of the current data from the node */
        var aPos = oTable.fnGetPosition( this );

        /* Get the data array for this row */
        var aData = oTable.fnGetData( aPos[0] );

        /* Update the data array and return the value */
        aData[ aPos[1] ] = 'clicked';
        this.innerHTML = 'clicked';
    } );

    /* Init DataTables */
    oTable = $('#example').dataTable();
} );

De datatables.net

23
James Kolpack

Je pense que la réponse ci-dessus du site datatables.net n’a pas été utile et n’a pas répondu à la question.

Je pense que neko_ime souhaite obtenir la valeur d'en-tête de colonne correspondant à la colonne de l'élément sélectionné (puisqu'il s'agit probablement du même nom que le nom de la colonne dans la table, ou que l'utilisateur dispose d'un mappage entre l'en-tête et la table de base de données).

voici comment vous obtenez le sTitle (valeur du nom de colonne) pour une cellule donnée  

(notez que j'ai la clé primaire dans la première colonne de chaque ligne et que je me suis assuré que même si vous utilisez des colonnes déplaçables avec ColReorder, iFixedColumns vaut 1, afin de conserver cette clé dans la première colonne. que j'ai la référence DOM de la cellule, que j'appelle «cible» ci-dessous):

var value = target.innerHTML;
var ret_arr = oTable.fnGetPosition( target );  // returns array of 3 indexes [ row, col_visible, col_all]
var row = ret_arr[0];
var col = ret_arr[1];
var data_row = oTable.fnGetData(row);
var primary_key = data_row[0];

var oSettings = oTable.fnSettings();  // you can find all sorts of goodies in the Settings
var col_id = oSettings.aoColumns[col].sTitle;  //for this code, we just want the sTitle

// you now have enough info to craft your SQL update query.  I'm outputting to alert box instead    
alert('update where id="'+primary_key+'" set column "'+col_id+'" ('+row+', '+col+') to "'+value+'"');

C'est quelque chose que j'ai dû comprendre moi-même, car j'utilise JEditable pour permettre aux utilisateurs de modifier les cellules du tableau.

10
fbas

L'extrait de code ci-dessus m'a réellement aidé à résoudre ce problème dans mon cas particulier. Voici mon code:

// My DataTable
var oTable;

$(document).ready(function() {
    /*  You might need to set the sSwfPath! Something like:
    *   TableToolsInit.sSwfPath = "/media/swf/ZeroClipboard.swf";
    */
    TableToolsInit.sSwfPath = "../../Application/JqueryPlugIns/TableTools/swf/ZeroClipboard.swf";

    oTable = $('#tblFeatures').dataTable({
        // "sDom": '<"H"lfr>t<"F"ip>', // this is the standard setting for use with jQueryUi, no TableTool
        // "sDom": '<"H"lfrT>t<"F"ip>', // this adds TableTool in the center of the header
        "sDom": '<"H"lfr>t<"F"ip>T', // this adds TableTool after the footer
        // "sDom": '<"H"lfrT>t<"F"ip>T', // this adds TableTool in the center of the header and after the footer
        "oLanguage": { "sSearch": "Filter this data:" },
        "iDisplayLength": 25,
        "bJQueryUI": true,
        // "sPaginationType": "full_numbers",
        "aaSorting": [[0, "asc"]],
        "bProcessing": true,
        "bStateSave": true, // remembers table state via cookies
        "aoColumns": [
        /* CustomerId */{"bVisible": false },
        /* OrderId */{"bVisible": false },
        /* OrderDetailId */{"bVisible": false },
        /* StateId */{"bVisible": false },
        /* Product */null,
        /* Description */null,
        /* Rating */null,
        /* Price */null
        ]
    });

    // uncomment this if you want a fixed header
    // don't forget to reference the "FixedHeader.js" file.
    // new FixedHeader(oTable);
});

// Add a click handler to the rows - this could be used as a callback
// Most of this section of code is from the DataTables.net site
$('#tblFeatures tr').click(function() {
    if ($(this).hasClass('row_selected')) {
        $(this).removeClass('row_selected');
    }
    else {
        $(this).addClass('row_selected');

        // Call fnGetSelected function to get a list of selected rows
        // and pass that array into fnGetIdsOfSelectedRows function.
        fnGetIdsOfSelectedRows(fnGetSelected(oTable));
    }
});

function fnGetSelected(oTableLocal) {
    var aReturn = new Array();

    // fnGetNodes is a built in DataTable function
    // aTrs == array of table rows
    var aTrs = oTableLocal.fnGetNodes();

    // put all rows that have a class of 'row_selected' into
    // the returned array
    for (var i = 0; i < aTrs.length; i++) {
        if ($(aTrs[i]).hasClass('row_selected')) {
            aReturn.Push(aTrs[i]);
        }
    }

    return aReturn;
}

// This code is purposefully verbose.
// This is the section of code that will get the values of
// hidden columns in a datatable
function fnGetIdsOfSelectedRows(oSelectedRows) {
    var aRowIndexes = new Array();
    var aRowData = new Array();
    var aReturn = new Array();
    var AllValues;

    aRowIndexes = oSelectedRows;    

    // The first 4 columns in my DataTable are id's and are hidden.
    // Column0 = CustomerId
    // Column1 = OrderId
    // Column2 = OrderDetailId
    // Column3 = StateId

    // Here I loop through the selected rows and create a
    // comma delimited array of id's that I will be sending
    // back to the server for processing.
    for(var i = 0; i < aRowIndexes.length; i++){
        // fnGetData is a built in function of the DataTable
        // I'm grabbing the data from rowindex "i"
        aRowData = oTable.fnGetData(aRowIndexes[i]);

        // I'm just concatenating the values and storing them
        // in an array for each selected row.
        AllValues = aRowData[0] + ',' + aRowData[1] + ',' + aRowData[2] + ',' + aRowData[3];
        alert(AllValues);
        aReturn.Push(AllValues);
    }

    return aReturn;
}
5
Solburn

Voici un exemple pour obtenir un identifiant après avoir cliqué sur la ligne.

$('#example tbody tr').live('click', function() {
         var row = example .fnGetData(this);
         id=row['id'];//or row[0] depend of situation
         function(id);
});

Si vous avez besoin de tous les identifiants dans une table, vous devez utiliser un code comme celui-ci:

$(exampleTable.fnGetNodes()).each(function() { 

    var aPos = exampleTable.fnGetPosition(this);
    var aData = exampleTable.fnGetData(aPos[0]);
    aData[aPos[0]] = this.cells[0].innerHTML; 

    IdSet.Push(aData[aPos[0]]);
});

espérons l'aide!

3
Oibaf it

Une question simple comme celle-ci mérite une bonne solution simple, jQuery.

Supposons que votre identifiant figure sur la ligne 0 .__ et que vous souhaitez y accéder lorsque vous effectuez une action sur la ligne 5, par exemple.

$('td:eq(5)').click(function (){
    var id  = $(this).parent().find('td:eq(0)').html();
    alert('The id is ' + id);
});

Notez que cela fonctionne également pour le filtre et les résultats paginés. 

Je suis d’accord avec @fbas, la réponse courante n’a pas été très utile.

1
Sydwell

var oTable;

/* Get the rows which are currently selected */
function fnGetSelected(oTableLocal) {
    var aReturn = new Array();
    var aTrs = oTableLocal.fnGetNodes();

    for (var i = 0; i < aTrs.length; i++) {
        if ($(aTrs[i]).hasClass('row_selected')) {
            aReturn.Push(aTrs[i]);
        }
    }
    // console.log( aReturn);
    return aReturn;
}

$(function() {

    /////////////////
    //btn_EditCustomer
    $('#btn_EditCustomer').on('click', function(e) {
        var anSelected = fnGetSelected(oTable);
        var rowData = oTable.fnGetData(anSelected[0]);
        console.log(rowData[0]);
    });
});  </script>
0
Zakari

Ma solution était la suivante: avoir la clé primaire comme première colonne - elle peut être définie comme "visible" ou non. Mes liens d'édition et de suppression se trouvent dans l'avant-dernière et la dernière colonne de la ligne. Ils ont respectivement les classes CSS "edit" et "delete". Ensuite, en utilisant rowCallBack, appelez une fonction comme celle-ci:

<!-- datatables initialisation -->
"rowCallback": function( row, data ) {
    setCrudLinks(row, data);                  
}

function setCrudLinks(row, data) {
    d = $(row).find('a.delete');
    d.attr('href', d.attr('href')+'/'+data[0]);
    e = $(row).find('a.edit');
    e.attr('href', e.attr('href')+'/'+data[0]);
}

setCrudLinks () ajoute simplement la clé primaire (data [0]) à la fin des liens href (quelle que soit la nécessité). Cela se produit avant le rendu de la table et fonctionne donc également sur la pagination.

0
Matthew Diggins

J'avais le même cas d'utilisation et j'ai fini par transformer mon code en un plugin datatables.net. Le référentiel est ici: DataTables CellEdit Plugin

L'initialisation de base est simple et rapide:

table.MakeCellsEditable({
    "onUpdate": myCallbackFunction
});

myCallbackFunction = function (updatedCell, updatedRow) {
    var columnIndex = cell.index().column;
    var columnHeader = $(table.column(columnIndex).header()).html();
    console.log("The header  is: " + columnHeader);
    console.log("The new value for the cell is: " + updatedCell.data());
}
0
Elliott