Attempting to Add Ajax Request to Datatable

Question

I'm attempting to add some functionality to my table that will allow the user to select one or multiple rows so that after the user clicks the delete button it will send an Ajax request to the sever where it will delete the items from the table. I've been looking around the datatables website which is the script that I added to my page and there is so much I'm not sure what exactly I'll need to complete this.

$( '#table' ).dataTable({
    "sDom": '<"top"lTf<"clear">>rt<"actions"<"actions-left"i><"actions-right"p>>',
    "bAutoWidth": false,
    "sPaginationType" : "full_numbers",
    "oTableTools": {
    "aButtons": [
            {
                "sExtends":    "text",
                "sButtonText": "Add"
            },
            {
                "sExtends":    "text",
                "sButtonText": "Edit"
            },
            {
                "sExtends":    "text",
                "sButtonText": "Delete",
                "sAjaxUrl": "delete_title"
            },
        ]
    },
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [ 0 ] },
        { "sWidth": "20px", "aTargets": [ 0 ] },
        { "sWidth": "40px", "aTargets": [ 1 ] },
        { "sClass": "alignCenter", "aTargets": [ 1 ] }
    ]
});

<?php            
        $tmpl = array ( 'table_open'  => '<table class="table" id="titles-table">' );
        $data = array('name' => 'titles', 'class' => 'selectall');
        $this->table->set_heading(form_checkbox($data), 'ID', 'Title Name', 'Style', 'Status');            
        $this->table->set_template($tmpl);             
        foreach ($titles as $row)
        {
            $checkbox_data = array(
                'name'        => 'titles',
                'id'          => $row->id
            );
            $this->table->add_row(form_checkbox($checkbox_data), $row->id, $row->title_name, $row->type_name, $row->status_name);
        }
        echo $this->table->generate(); 
        ?>

Does anyoen else see what I"m missing?

Answer 1

The alternaitve route is to just use jquery/javascript plainly to do your bidding.. Here is an example I did for something very similar, its not a direct answer for your cause.. but if altered to match your id's classes, etc.. could do plenty to help you in your cause

        $("#hideme").click(function(e)
        {
            e.preventDefault();
            var postArray = new Array();
            i=0;
            $("input:checked").each(function()
            {
                var theID = $(this).attr("name");
                theID = theID.replace("offerterms-", "");
                postArray.push(theID);
                $(this).parents("tr").animate(
                    {"color":"#FFF", "background-color":"#FFF"},
                    "5000",
                    function()
                    {
                        $("input:checked").parents("tr").remove();
                        $("table.datatable TR").removeClass("darkrow");
                        $("table.datatable TR:odd").addClass("darkrow");
                    });
            });
            $.post("./hide/", {"entry":postArray}, function(data)
            {
                if((".datatable tr").length == 1){$(".datatable").hide();$("#hideme").hide();$("#recordCount").text("0");}
                else{$("#recordCount").text((parseInt($("#recordCount").text())-1));}
                //alert(data.msg);
            }, "json");
        });

what this does, is essentially iterate over the table and builds an array of the checked checkboxes to post to my backend at which time I use that array to handle my db entries and preform in my case a hide of the data so it hides for use on another similar table of which admins can view those and unhide them later.. anyway while iterating over the table it then hides on a per row basis all the rows with a checkbox that is checked.

Answer 2

Check the example for Server Side Processing.

You need to add the sAjaxSource to your DataTable Initialization, and define the deletion in there. Also you might need to push extra server params to the serverside. You can use something like this:

//Example from one of my projects:
//This adds extra data to the ajax request sent by datatables. 
"fnServerParams": function (aoData) {
        aoData.push({ "name": "bu", "value": BU });
        aoData.push({ "name": "SLAName", "value": SLANAME });
        aoData.push({ "name": "substep", "value": STEP });
        aoData.push({ "name": "timeperiod", "value": TIME });
        var UserFilter = $("#userFilter").val();
        aoData.push({ "name": "user", "value": UserFilter });
    }

If you need more help or more details just ask!

//EDIT 1

$( '#table' ).dataTable({
"sDom": '<"top"lTf<"clear">>rt<"actions"<"actions-left"i><"actions-right"p>>',
"bAutoWidth": false,
"sPaginationType" : "full_numbers",
"sAjaxSource" : "/path/to/function",
"fnServerParams": function (aoData) {
    aoData.Push(ArrayWithCheckboxInfo);
},
"oTableTools": {
"aButtons": [
        {
            "sExtends":    "text",
            "sButtonText": "Add"
        },
        {
            "sExtends":    "text",
            "sButtonText": "Edit"
        },
        {
            "sExtends":    "text",
            "sButtonText": "Delete",
            "sAjaxUrl": "delete_title"
        },
    ]
},
"aoColumnDefs": [
    { "bSortable": false, "aTargets": [ 0 ] },
    { "sWidth": "20px", "aTargets": [ 0 ] },
    { "sWidth": "40px", "aTargets": [ 1 ] },
    { "sClass": "alignCenter", "aTargets": [ 1 ] }
]

});

Then on the serverside just deal with the checkboxes based on info from the array. I don't know if you want to remove the row from the datatable or the database but you can do both, and then it would send the updated data to the client.