jQuery - डेटाटेबल्स, कॉलम आईडी कैसे प्राप्त करें

Question

jquery के लिए डेटाटेबल प्लगइन में कॉलम आईडी कैसे प्राप्त करें मुझे डेटाबेस में अद्यतन के लिए कॉलम आईडी की आवश्यकता है।

Answer 1

fnGetPosition

एक विशेष सेल की सरणी अनुक्रमित जाओ यह डोम तत्व है से। FnGetData() के साथ संयोजन में का सबसे अच्छा उपयोग किया जाता है।

इनपुट पैरामीटर:

nNode: नोड आप की स्थिति लगाना चाहते हैं। यह मेरी या तो 'टीआर' पंक्ति या तालिका से 'टीडी' सेल हो। वापसी पैरामीटर इस इनपुट पर निर्भर करता है।

वापसी पैरामीटर:

पूर्णांक या सरणी [पूर्णांक, पूर्णांक, पूर्णांक]: यदि नोड एक तालिका पंक्ति (TR) तो वापसी मान सूचकांक के साथ एक पूर्णांक हो जाएगा AoData ऑब्जेक्ट में पंक्ति का। यदि नोड एक टेबल सेल (टीडी) है तो वापसी मान सरणी [एओडाटा इंडेक्स पंक्ति, कॉलम इंडेक्स (छिपी हुई पंक्तियों को छूट), कॉलम अनुक्रमणिका (छिपी पंक्तियों सहित) के साथ होगा।

कोड उदाहरण:

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

से datatables.net

Answer 2

कोड स्निपेट के ऊपर वास्तव में मुझे मेरे विशेष स्थिति के लिए इस समस्या को हल में मदद की। यहां मेरा कोड है:

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

Answer 3

मुझे लगता है कि datatables.net साइट से ऊपर का स्टॉक उत्तर सहायक नहीं था और इस सवाल का जवाब नहीं दिया।

मेरा मानना ​​है कि neko_ime चयनित आइटम के कॉलम से संबंधित कॉलम हेडर वैल्यू प्राप्त करना चाहता है (क्योंकि यह तालिका में कॉलम नाम के समान ही है, या उपयोगकर्ता के पास टेबल हेडर और डेटाबेस के बीच मैपिंग है तालिका)।

यहाँ कैसे आप (जब किसी सेल

के लिए sTitle (स्तंभ नाम मूल्य) प्राप्त ध्यान दें मैं हर पंक्ति के पहले स्तंभ में मेरी प्राथमिक कुंजी है, और यह सुनिश्चित करें कि भले ही चल स्तंभों का उपयोग बना दिया है ColReorder साथ iFixedColumns पहले कॉलम में उस कुंजी रखने के लिए 1 है कि, मेरे datatable oTable द्वारा संदर्भित है मैं यह सोचते हैं कि मैं सेल डोम संदर्भ है, जो मैं 'लक्ष्य' के नीचे) फोन है:।।

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+'"'); 

यह कुछ ऐसा है जो मुझे खुद को समझना था, क्योंकि मैं जडेड का उपयोग कर रहा हूं ताकि उपयोगकर्ताओं को टा में कोशिकाओं को संपादित करने की अनुमति मिल सके ble।

Answer 4

इस तरह का एक साधारण सवाल एक अच्छा सरल jQuery समाधान का हकदार है।

मान लें अपने आईडी पंक्ति 0 पर है और जब उदाहरण के लिए पंक्ति 5 पर क्रिया करने

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

नोट इस फिल्टर के लिए काम करता है आप इसे उपयोग करना चाहते हैं और पृष्ठांकित परिणाम के रूप में अच्छी तरह से।

मैं @fbas से सहमत हूं स्टॉक का जवाब वास्तव में सहायक नहीं था।

Answer 5

यहाँ

कैसे पंक्ति

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

पर क्लिक करने के बाद एक आईडी प्राप्त करने के लिए आप एक तालिका में सभी आईडी की जरूरत है आप इस तरह एक कोड का उपयोग करना है, तो का एक उदाहरण:

$(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]]); 
}); 

उम्मीद है मदद!

Answer 6

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> 

Answer 7

मेरे समाधान निम्नलिखित था: 1 स्तंभ के रूप में प्राथमिक कुंजी है - इस 'दृश्य' है या नहीं के रूप में स्थापित किया जा सकता है। मेरे संपादन और हटाए गए लिंक अंतिम में हैं लेकिन पंक्ति में एक और आखिरी कॉलम हैं - उनके पास क्रमशः 'संपादन' और 'हटाएं' के सीएसएस वर्ग हैं। तब rowCallBack उपयोग करते हुए, इस तरह एक समारोह फोन:

<!-- 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() बस प्राथमिक कुंजी संलग्न कर देता है (डेटा [0]) लिंक href (जो कि होना करने के लिए आवश्यकता हो सकती है) के अंत तक। यह पूर्व तालिका प्रस्तुत करता है, और इसलिए पेजिनेशन पर भी काम करता है।

Answer 8

मेरे पास एक ही उपयोग का मामला था और मेरे कोड को datatables.net प्लगइन में कताई समाप्त कर दिया। रेपो यहाँ है: DataTables CellEdit Plugin

बुनियादी प्रारंभ त्वरित और आसान है:

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