Data tables, row selection and return identifier for deletion

Question

first post but i really need help. For a while I was working on this small project and found that Datatables would be next to useless, but they were told that I should use it ... In any case, Ive got it by mapping our table from an ajax call to our SQL server. It should allow the user to select multiple lines and click the "Delete" button. Then it MUST retrieve the identifier from each selected row and pass it back through an ajax call to our server, which will then remove the value.

Ive tried about 5 row selection methods, more deletion attempts, I can count, and NOTHING works. Ive asked for help on their support site several times over the last couple of weeks, and havent received one answer, so hope that people here can help more :)

Anyway heres my code: JSFIDDLE UPDATED CURRENT

$(document).ready(function(){ var oTable = $('#dataTable').dataTable({ //"bServerSide": true, "bProcessing": true, "bJQueryUI": true, "bPaginate": true, "sPaginationType": "full_numbers", "iDisplayLength": 10, "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], "sDom": 'pT<><f>rt<il>', "sAjaxSource": 'dataTable/getCmsGroupData', "aoColumns": [ { "mData": "id", "sTitle": "ID", "fnRender": function (oObj) { return '<a href="cmsgroup_update?id='+ oObj.aData["id"] + '">' + oObj.aData["id"] + '</a>'; }}, { "mData": "version", "sTitle":"Version" }, { "mData": "name", "sTitle": "Name" }, { "mData": "description", "sTitle": "Description"}, { "mData": "notes", "sTitle": "Notes"}, ], "oTableTools": { "aButtons": [ "select_all", "select_none", { "sExtends": "text", "sButtonText": "Create New Entry", "fnClick": function ( nButton, oConfig, oFlash ) { window.location = "cmsgroup_add"; } }] } }); $("#dataTable tbody").click(function(event) { $(oTable.fnSettings().aoData).each(function (){ $(this.nTr).removeClass('row_selected'); }); $(event.target.parentNode).addClass('row_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] ); } } return aReturn; } $("#delete").click(function(){ selected = fnGetSelected(oTable); oTable.fnDeleteRow( selected[0]); $.ajax({ type: "POST", url: "dataTable/delete/cmsGroup", data: 'tableData='+ $(selected).text(), success: function(result) { alert("worked!"); } }); }); } ); 

Any help would be great !!!

Answer 1

When you use fnDelete, you must pass a string or strings to remove it from datatable. For this you need to use oTableLocal. $ ("Tr") to get the rows from datatable.

 function fnGetSelected( oTableLocal ) { var aReturn = new Array(); oTableLocal.$("tr").filter(".row_selected").each(function (index, row){ aReturn.push(row);// this should work, if not try aReturn.push($(row)); //to get the information in the first column aReturn.push($(row).eq(0).text()); return aReturn; } 

Answer 2

You need to wrap aTrs[i] in $() , for example, $(aTrs[i]).hasClass('row_selected') in order to access the jQuery methods.

You should also use the .on handler, not click or live , because datatable can recreate nodes and live deprecated.

If you return an example response from dataTable/getCmsGroupData , I can be more useful.

Answer 3

Got it fixed! :) thanks for helping everyone!

 $(document).ready(function () { var oTable = $('#dataTable').dataTable({ //"bServerSide": true, "bProcessing": true, "bJQueryUI": true, "bPaginate": true, "sPaginationType": "full_numbers", "iDisplayLength": 10, "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], "sDom": 'pT<><f>rt<il>', "aAjaxSource": 'dataTable/getCmsAttributeData', "aoColumns": [{ "mData": "id", "sTitle": "ID", "fnRender": function (oObj) { return '<a href="cmsattribute_update?id=' + oObj.aData["id"] + '">' + oObj.aData["id"] + '</a>'; } }, { "mData": "version:", "sTitle": "Version" }, { "mData": "name:", "sTitle": "name" }, { "mData": "description", "sTitle": "Description" }, { "mData": "cmsgroupid", "sTitle": "CMS Group ID" }, { "mData": "masterattributeid", "sTitle": "Master Attribute ID" }, { "mData": "notes", "sTitle": "Notes" }], "oTableTools": { "aButtons": [{ "sExtends": "text", "sButtonText": "Delete", "fnClick": function (nButton, oConfig, nRow) { if (confirm('Are you sure want to delete this record?')) { var list = $('tr.DTTT_selected > td.sorting_1 > a').map(function () { return this.text; }).get().join(","); $.ajax({ type: "POST", url: "dataTable/delete/cmsGroup", data: 'tableData=' + list, success: function (result) { alert("Entry Deleted"); $('tr.DTTT_selected').remove(); } }); } } }, "select_all", "select_none", { "sExtends": "text", "sButtonText": "Create New Entry", "fnClick": function (nButton, oConfig, oFlash) { window.location = "cmsgroup_add"; } }] } }); });