Row check box is not working in jQuery datatable

Question

I am using a jQuery datatable with checkbox column for select checked rows value in button click event. Please see my below image.

I use this code for getting check rows

        var checkedRows = dtTable._('tr.checked', { "filter": "applied" });

My problem is when i click the header row check box it's works fine. But it's shows null

in single row check box click. I am clueless.

Edit

firebug

JQuery

var dtTable = null;
var ajaxUrl = "";

$(document).ready(function () {

    GetCustomerAcceptence();

    $("#btnReceived").click(function () {

        var checkedRows = dtTable._('tr.checked', { "filter": "applied" });

        if (checkedRows == null) {
            alert("checkedRows is null.");
        }
        else {
            alert("checkedRows is not null. Value : " + checkedRows[0][1]);
        }
    });

    function GetCustomerAcceptence() {

        /* Clear datatable before reload. */

        ClearDataTable();

        var elementName = "";

        ajaxUrl = "";

        elementName = "#tblCustomerAcceptence";

        ajaxUrl = '@Url.Action("GetCustomerAcceptenceOrders", "Dispatch")';

        dtTable = $(elementName).dataTable({
            bProcessing: false,
            bLengthChange: false,
            bInfo: false,
            bFilter: false,
            bPaginate: false,
            sAjaxSource: ajaxUrl,
            aoColumns: [
                 {
                     "sClass": "checkbox-column",
                     bSortable: false,
                     "mRender": function (data, type, full) {
                         return '<input type="checkbox" onclick="check(this)" class="icheck-input">';
                     }
                 },
                 { sTitle: "Id", bSortable: false, bVisible: false },
                 { sTitle: "Number", bSortable: false, },
                 { sTitle: "Description", bFilterable: true, bSortable: false, },
                 { sTitle: "PoBox Number", bSortable: false, },
                 { sTitle: "Owner", bSortable: false, },
                 { sTitle: "Physical Weight", bSortable: false, },
                 { sTitle: "Vol.Weight", bSortable: false, },
                 { sTitle: "Last Status", bSortable: false, },
                 { sTitle: "Zone", bSortable: false, },
            ],
            "fnServerParams": function (aoData) {
                aoData.push(
                                { "name": "MasterAWB", "value": "0" },
                                { "name": "PoboxNumber", "value": "0" },
                                { "name": "TypeofGoods", "value": 0 },
                                { "name": "Provider", "value": 0 },
                                { "name": "DateFrom", "value": "0" },
                                { "name": "DateTo", "value": "0" },
                                { "name": "Zone", "value": 0 },
                                { "name": "BagNumber", "value": "0" }
                );
            },
        });
    }

    function ClearDataTable() {

        if (dtTable != null) {
            dtTable.dataTable().fnClearTable();
            dtTable.dataTable().fnDestroy();
        }

    }
});

Answer 1

I am really sorry to say that there is a mistake in check box column. I need to place check function in my webpage to fire the check box checked event.

/* checkbox in table */

function check(e) {
    if ($(e).parent('td').parent('tr').hasClass('checked')) {
        $(e).parent('td').parent('tr').parent('tbody').parent('table').children('thead').find('th:first').children('div').removeClass('checked');
        $(e).parent('td').parent('tr').removeClass('checked');
    }
    else {
        $(e).parent('td').parent('tr').addClass('checked');
        dtTable.fnDraw();
    }
}

/* end */