CODEWITHSUNDEEP
jqueryajaxdatatables
The Internet
The Internet

Reputation: 8103

How to add custom rows to jQuery DataTables plugin

I have a basic html page that has a jQuery DataTables grid on it. I am able to

http://datatables.net/index

It displays in browser just fine. The problem is that I want to add custom row headers to each section. So a row header could be located on row 3, row 8.. etc. How do I dynamically insert a row header in the middle of the datatable?

getDataOverview: function ($page) {
        $page.find('#tblDataTable').dataTable({
            "bServerSide": true,
            "fnDrawCallback": onAfterTableLoad,
            "bJQueryUI": false,
            "bFilter": false,
            "bPaginate": false,
            "bLengthChange": false,
            "oLanguage": { "sInfo": "" },
            "sAjaxSource": this.getUrl($page) + '/GetDataOverview/',
            "fnServerData": function (sSource, aoData, fnCallback) {

                $.ajax({
                    dataType: 'json',
                    type: "POST",
                    url: sSource,
                    data: aoData,
                    success: fnCallback,
                    error: function (jqXHR, textStatus, errorThrown) { alert('Error getting data' + errorThrown) }
                })
            },
            "bProcessing": false, // don't want to use the default progress indicator at this time
            "aoColumnDefs": [
                { "sName": "ID", "aTargets": [0], "mDataProp": "ID", "bSortable": false },
                { "sName": "Name", "aTargets": [1], "mDataProp": "Name", "bSortable": false },
                { "sName": "Other", "aTargets": [2], "mDataProp": "Other", "bSortable": false }
            ],
            "aaSorting": [[0, "asc"]] // default sort by Task Type
        });
    },

Upvotes: 1

Views: 1605

Answers (1)

jlrolin
jlrolin

Reputation: 1614

Check out fnRowCallback. You may be able to, during the callback, determine the row you want to add a header to, then inject a new row if it meets your condition.

Upvotes: 1

Related Questions