DataTables, select rows and pass back ID for delete

Question

first time posting here but i really need help. Been working on this little project for a while and am finding Datatables to be next to useless but im being told i must use it....anyway Ive got it displaying our table from an ajax call to our SQL server. It needs to let the user select a few rows and click a delete button. It then SHOULD get the ID from each selected row and pass it back via an ajax call to our server which will then delete the value.

Ive tried about 5 diff row select methods, more delete attempts then i can count, and NOTHING is working. Ive asked for help on their support site several times over the past couple weeks and havent gotten a single reply so hoping the people here may be able to help more :)

Anyway heres my code: JSFIDDLE UPDATED TO 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!!!

Bret · Accepted Answer · 2013-02-16T14:01:35.653

2

When you use fnDelete you have to pass the row or rows to delete to it from the datatable. In order to do that you have to use the oTableLocal.$("tr") to get the rows from the 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;
}

edited Feb 16 '13 at 14:01

answered Feb 15 '13 at 02:49

Bret

401
2
4

i did that however it still has the same problem, rather then returning just the ID from the first cell in the row, it returns the entire row. Tried both ways you mentioned. – user2069834 Feb 15 '13 at 15:13
I updated my answer to pass the first columns information back. – Bret Feb 16 '13 at 14:03

Alex M · Answer 2 · 2013-02-13T20:45:49.013

1

You need to wrap the aTrs[i] in a $(), like so $(aTrs[i]).hasClass('row_selected') to get access to the jQuery methods.

You should also be using the .on handler rather than click or live because of the way that the datatable can recreate nodes and live is deprecated.

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

edited Feb 13 '13 at 20:45

answered Feb 13 '13 at 20:34

Alex M

3,506
2
20
23

Plugging those changes in now but in the mean time the get data: { "iTotalRecords": 24,"iTotalDisplayRecords": 24, "aaData": [{"id":1,"version":0,"name":"Network","description":"Corporate Network","notes":"Network Notes","displaysize":0},{"id":2,"version":5,"name":"Project","description":"","notes":"","displaysize":0},......and it goes on – user2069834 Feb 13 '13 at 20:51
its not working, i added $() to the call, and changed to .on like so: $('.dataTable tbody tr').on('click', function () { but now its not working at all? – user2069834 Feb 13 '13 at 21:01
yea for me it loads locally (jfiddle gives me an error, does not look like its working to me?), pulls down data, but the delete command still wont work. Further the .on handler seems to have broken it. Now if i click on a row it does nothing, does not get 'selected' – user2069834 Feb 13 '13 at 21:28
jsfiddle has ben updated and is working for me. I think your post is off. What is the delete script expecting? currently script is sending dom nodes (which actually just sends the string rendering in the post) – Alex M Feb 13 '13 at 21:46
Updated to collect list of ids to delete, you should probably read over and use that instead. A few other small changes (read comments in the fiddle) – Alex M Feb 13 '13 at 22:04
just got to work this morning and am looking over the changes in jsfiddle. regarding the delete though it is expecting for example 'tableData=id' where id is from the selected row. – user2069834 Feb 14 '13 at 16:26
Implemented your code from jsfiddle and it does not work at all, the row select function is totally broken when using the .on handler. – user2069834 Feb 14 '13 at 16:44
Updated the fiddle again, ive got it working for single row selection using .click as .on never worked. when i select the row and hit delete it passes the WHOLE row back rather then just the first cell. IE: a row with ID:1 name:name value:value, it passes back '1namevalue', when i just need it to pass back '1'. – user2069834 Feb 14 '13 at 19:09
The code from JS Fiddle had a number of changes, each commented. You replaced it with your original code again, so the changes are lost. You can use `.find(':first-child a').text()` to get what your looking for. If future, you should only replace specific code in the fiddle. There was a change to use aaData initialization instead of ajax that made it testable on JSFiddle, along with other fixes, which is probably what broken things when you copy and paste the whole snippet it into your page. – Alex M Feb 14 '13 at 20:23
oh dang....ive never posted on here or used jfiddle before, didnt see the comments. So sorry! What would i append '.find(':first-child a').text()' onto the end of? – user2069834 Feb 14 '13 at 21:26
It's performed on a jQuery wrapped object for the table row. http://jsfiddle.net/HkSV9/9/ (apparently jsfiddle has version control :)) – Alex M Feb 15 '13 at 09:06

score 1 · Answer 3 · edited Mar 16 '13 at 11:00

Got it fixed! :) thanks for help 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";
                }
     }]
        }
    });
});

DataTables, select rows and pass back ID for delete

3 Answers3