1

I'm new to Datatable and am trying to configure the Datatable, so that it fetches the data with ajax, displays it as a check-box, an anchor and a tab and allows a user to sort it. I have the ajax and formatting part, however when I try to sort the check-boxes it does nothing. I looked up the documented example and took the sort handler from it:

Code for sorting: 

/* Create an array with the values of all the checkboxes in a column */
        $.fn.dataTableExt.afnSortData['dom-checkbox'] = function (oSettings, iColumn) {
            var aData = [];
            $('td:eq(' + iColumn + ') input', oSettings.oApi._fnGetTrNodes(oSettings)).each(function () {
                aData.push(this.checked == true ? "1" : "0");
            });
            return aData;
        }

Code for creating the checkbox:

    $('#example').dataTable({
        "bProcessing": true,
        "sAjaxSource": "sources/myData.json",
        "sAjaxDataProp": "items",
        "aoColumns": [
            {
                "mData": function (source, type, val) {
                    if (source.Published)
                        return '<input type="checkbox" checked="checked"/>';
                    else
                        return '<input type="checkbox" />';

                },
                //"sType": "dom-checkbox",
                "sSortDataType": "dom-checkbox"
                //, "bSortable": false
            },
            { "mData": "Author" },
            {
                "mData": function (source, type, val) {
                    return '<a href="' + source.Href + '">' + source.$name + '</a>';
                }
            }
        ]
    });

The sorting function ( $.fn.dataTableExt.afnSortData['dom-checkbox'] is called and the data is returned, however the table isn't updated. (the code works but not for ajax tables).

Data sample: 

{
    "items": [
        {
            "$name": "a",
            "Href": "http://google.com",
            "Author": "a",
            "Published": true
        },
        {
            "$name": "c",
            "Href": "http://www.whiskas.at/",
            "Author": "a",          
            "Published": false
        }
    ]
}
4

1 に答える 1

1

Note that what you've written is standard JavaScript, not jQuery. If this refers to a jQuery object rather than a DOM element, checked will be undefined because the jQuery object does not have a checked property. If this is a jQuery object, you can try some of the following examples:

this.prop("checked");

or

$(this).is(":checked")

Replace this with the this.checked in your current sorting function. Here's an example:

//Create an array with the values of all the checkboxes in a column
$.fn.dataTableExt.afnSortData['dom-checkbox'] = function (oSettings, iColumn) {
  var aData = [];
  $('td:eq(' + iColumn + ') input', oSettings.oApi._fnGetTrNodes(oSettings)).each(function() {
    aData.push($(this).is(':checked') == true ? "1" : "0"); //New jQuery variable here
  });
  return aData;
}
于 2013-01-11T05:21:38.510 に答える