multiple colspans with ajax jquery datasource

schinamanagonda

<th colspan="2"></th>
<th colspan="2"></th>
<th colspan="3"></th>

$("#dataTable").DataTable({
// "processing": true, // for show progress bar
// "serverSide": false, // for process server side
// "filter": true, // this is for disable filter (search box)
// "orderMulti": false, // for disable multiple column at once
// "Paging": true,
// "PageLength": 20,
// "pagingType": "full_numbers",
// "bDestroy": true,
// c
// { title: 'Cases' },
// { title: 'Total Down Time' },
// { title: 'TopDown Time Reason' },
// ],
// columns: [
// {
// data: 'xxxx',
// render: function (data) {
// return ;
// }
// },
// { data: 'xxxx' },
// { data: 'xxxxxx' },
// ],
// ajax: {
// url: dueDateUrl,
// dataSrc: ''
// }
// });
//}

how to get data in these columns i still get a single object values or do you think for each row would be better instead of doing this?

kthorngren

First you will want to look at this Complex header example. Its unclear by your code snippet if you are trying to use complext headers but the key take away is this:

Each column must have one TH cell which is unique to it for the listeners to be added. By default DataTables will use the bottom unique cell for the column to attach the order listener

i still get a single object values

Are you saying you have nested objects? If so see this example.

If you still need help please provide a simple test case with an example of your data so we can understand exactly what you have to offer suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

schinamanagonda

kthorngren thanks for replying i tried to copy the jsfiddle link that didnt happen let me copy the example

Cases/Hour		Total Down Time		Top Down Time Reason

function GetdataTable() {
var dueDateUrl = "";
"processing": true, // for show progress bar
"serverSide": false, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"Paging": true,
"PageLength": 20,
"pagingType": "full_numbers",
"bDestroy": true,
columns: [

            { title: 'Cases' },
            { title: 'Total Down Time' },
            { title: 'TopDown Time Reason' },
        ],
        columns: [

            {
                data: 'CasesPerHour',
                render: function (data) {
                    return data.CasesPerHour ,data.CasesPerPercentage ;
                }
            },
            { data: 'TotalDownTReasonTime',
                render: function (data) {
                    return data.TotalDownTReasonTime,data.TotalDownTReasonTimePercentage ,data.TotalDownTReasonTimePerHour;
                }
            },
            { data: 'TotalDownTimeReason',
            render: function (data) {
                    return data.TotalDownTimeReason,data.TotalDownTimeReasonPerHour ;
                }
             },
        ],
        ajax: {
            url: dueDateUrl,
            dataSrc: ''
        }
    });
}

the down part is script what would be the return value is this the way to add column value i know how to do it if there is an array in the object or if there is a object with inner objects too.

Thanks

kthorngren

I'm not sure what the question or problem is or if you still have one. But if you do we need to see an example of your data with a description of the problem. Use the browser's network inspector to get a few rows of the JSON response. Then build a test case using Javascript data, like this example.

Kevin

schinamanagonda

schinamanagonda

I want data to be displayed on the above way with ajax jquery datasource

kthorngren

As mentioned before Datatables requires one th for each column. So you will need to adjust the header to support this. You can have one header row with three of the th with the header titles and the rest empty or you can create two header rows with the second having one th for each column and empty titles, similar to the complex header example I linked to earlier. Use CSS to style the header to look the way you wish.

The data source(Ajax, Javascript, HTML) doesn't matter.

Kevin

schinamanagonda

ok so how to insert data in it with ajax datasource? is it data.propertyname ? but single column has multiple datavalues how to mention that ? In the example i just wrote return value1,value2 ? is that the way ?

kthorngren

Start by reading the Ajax docs. Sounds like your data is object based which means you will use columns.data to define the columns. Take a look at the Ajax examples.

but single column has multiple datavalues how to mention that ?

Depends on how you want to display the data. Maybe the nested objects example is what you want. Or maybe use columns.render to display the data.

In order to give more specific answers please provide a simple test case with an example of your data. Also provide details of how you want the data displayed.

Kevin