I have a question can we display multiple lists of data in a single datatable

schinamanagonda

ouput has all lists of data if i mention specifically output.FullMonthActual that list of object displays correctly in the datatable but is there a way can i include in data as

{output.LineData 
output.FullMonthActual
output.Mtd
output.FullMonth} 

Lists data

output.LineData 
output.FullMonthActual
output.Mtd
output.FullMonth

function GetOutputDataTable(output,line,fullMonthActual,FullMonth) {
    return $('#outputDataTable').DataTable({
        processing: 'Loading....', // for show progress bar
        "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,
        data: output.FullMonthActual,
        columns: [
            { data: 'Line' },
            { data: 'LineData.Actual' },
            { data: 'LineData.Target' },
            { data: 'LineData.ActualVTarget' },
            { data: 'LineData.PSA' },
            { data: 'Completed' },
            { data: 'CompletedPerDay' },
            { data: 'TotalPlanned' },
            { data: 'PlannedPerDay' },
            { data: 'Total' },
            { data: 'Mtd.OriginalPlan' },
            { data: 'Mtd.ActualVOriginalPlan' },
            { data: 'Mtd.Budget' },
            { data: 'FullMonth.OriginalPlan' },
            { data: 'FullMonth.OriginalPlanPerDay' },
            { data: 'FullMonth.TotalVOriginalPlan' },
            { data: 'FullMonth.Budget' },
            { data: 'FullMonth.BudgetPerDay' },
            { data: 'FullMonth.TotalVBudget' },
        ],
        
    });

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Sorry I don't understand your data structure. This example shows how to display nested objects. If this doesn't help then please post a more full example of your data structure.

Kevin

schinamanagonda

{
    "name": "Tiger Nixon",
    "hr": [
{
        "position": "System Architect",
        "salary": "$3,120",
        "start_date": "2011/04/25"
    },
{
        "position": "System Architect",
        "salary": "$3,120",
        "start_date": "2011/04/25"
    },
],
    "contact": [{
        "phone": "System Architect",
        "address": "$3,120",
    },
{
        ""phone": "System Architect",
        "address": "$3,120
    },
    ]
 "contact1": [{
        "phone": "System Architect",
        "address": "$3,120",
    },
{
        ""phone": "System Architect",
        "address": "$3,120
    },
    ]
}

if this is the case how to mention in datatable

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

I fixed a couple errors in the above snippet. Datatables expects the row data to be an array so I made it an array. See this example:
https://live.datatables.net/bivovexo/1/edit

It uses columns.render to display each array element with a <br> in between each position for example.

Is this what you are looking for? If not please provide details of how you expect the data to be displayed.

Kevin

schinamanagonda

this is what my model has

public class OutputDTO
{
public List<LineDataDTO> LineData { get; set; }
public List<FullMonthActualDTO> FullMonthActual { get; set; }
public List<MTDDTO> Mtd { get; set; }
public List<FullMonthDTO> FullMonth { get; set; }

}

how to display this data

kthorngren

I'm not sure what the data structure is. Can you post an example? /basically we will need to see what an example of output is from your first post.

Kevin

schinamanagonda

this is how my output object has

allan

You want to display each entry in Output.FullMonth as a row in the table? Or something else?

DataTables requires that each row to display in the DataTable corresponds to one entry in the data array for the table's data source.

Allan

schinamanagonda

Yes fullmonth has few of the properties to display and other lists as well they have other columns and should display in same datatable is that possible ?

kthorngren

You will need to add each object, ie FullMonth, FullMonthActual, LineData, etc, individually using rows.add(). Here is a simple example which I think emulates your data structure:
https://live.datatables.net/fomefave/1/edit

Note the use of defaultContent to fill in the cells that don't have data. For example when adding object1 there aren't objects for col3 and col4. Also the chained draw() is only used on the last rows.add() which is more efficient then using it with each rows.add(). The example is not using data.

If you still need help then please update the example with your data so we can see exactly the structures you have.

Kevin

schinamanagonda

ar outputTable = $('#outputDataTable').DataTable({
processing: 'Loading....', // for show progress bar
"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,
data: output,
columns: [
{ data: 'LineData.Line', defaultContent: '' },
{ data: 'LineData.Target', defaultContent: '' },
{ data: 'LineData.Actual', defaultContent: '' },
{ data: 'LineData.ActualVTarget', defaultContent: '' },
{ data: 'LineData.PSA', defaultContent: '' },
{ data: 'FullMonthActual.Completed', defaultContent: '' },
{ data: 'FullMonthActual.CompletedPerDay', defaultContent: ''},
{ data: 'FullMonthActual.TotalPlanned', defaultContent: '' },
{ data: 'FullMonthActual.PlannedPerDay', defaultContent: '' },
{ data: 'FullMonthActual.Total', defaultContent: '' },
{ data: 'Mtd.OriginalPlan', defaultContent: '' },
{ data: 'Mtd.ActualVOriginalPlan', defaultContent: '' },
{ data: 'Mtd.Budget', defaultContent: '' },
{ data: 'Mtd.ActualVBudget', defaultContent: '' },
{ data: 'FullMonth.OriginalPlan', defaultContent: '' },
{ data: 'FullMonth.OriginalPlanPerDay', defaultContent: '' },
{ data: 'FullMonth.TotalVOriginalPlan', defaultContent: '' },
{ data: 'FullMonth.Budget', defaultContent: '' },
{ data: 'FullMonth.BudgetPerDay', defaultContent: '' },
{ data: 'FullMonth.TotalVBudget', defaultContent: '' },
],

});
outputTable.rows.add(output.LineData);
outputTable.rows.add(output.FullMonthActual).draw();
outputTable.rows.add(output.Mtd).draw();
outputTable.rows.add(output.FullMonth).draw();

still data shows empty

kthorngren

Look in the browser's console for errors. You probably will want to remove data: output,. You probably don't want to reference the full object ( { data: 'LineData.Line', defaultContent: '' }, ) since you are referencing it with outputTable.rows.add(output.LineData);. Change each columns.data to reference the objects inside LineData, FullMonthActual, etc. Like this:

{ data: 'Line', defaultContent: '' },

To further troubleshoot we will need to see a running example showing the problem. This way we can see exactly the data structure you have to offer more specific help. Either post a link to your page or update me example or create your own test case with a sample of your data.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

I assume the code you posted is inside the `$.getJSON function so it executes after the response is received.

Kevin

schinamanagonda

I dont see any error but when i try to debug i see data in the table but when i try to see on the page i see only some data

schinamanagonda

var outputTable = $('#outputDataTable').DataTable({
processing: 'Loading....', // for show progress bar
"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,
//data: output,
columns: [
{ data: 'Line', defaultContent: '' },
{ data: 'Target', defaultContent: '' },
{ data: 'Actual', defaultContent: '' },
{ data: 'ActualVTarget', defaultContent: '' },
{ data: 'PSA', defaultContent: '' },
{ data: 'Completed', defaultContent: '' },
{ data: 'CompletedPerDay', defaultContent: ''},
{ data: 'TotalPlanned', defaultContent: '' },
{ data: 'PlannedPerDay', defaultContent: '' },
{ data: 'Total', defaultContent: '' },
{ data: 'OriginalPlan', defaultContent: '' },
{ data: 'ActualVOriginalPlan', defaultContent: '' },
{ data: 'Budget', defaultContent: '' },
{ data: 'ActualVBudget', defaultContent: '' },
{ data: 'OriginalPlan', defaultContent: '' },
{ data: 'OriginalPlanPerDay', defaultContent: '' },
{ data: 'TotalVOriginalPlan', defaultContent: '' },
{ data: 'Budget', defaultContent: '' },
{ data: 'BudgetPerDay', defaultContent: '' },
{ data: 'TotalVBudget', defaultContent: '' },
],

});
outputTable.rows.add(output.LineData).draw();
outputTable.rows.add(output.FullMonthActual).draw();
outputTable.rows.add(output.Mtd).draw();
outputTable.rows.add(output.FullMonth).draw();
return outputTable;

schinamanagonda

schinamanagonda

sorry i see data now but it is like this

kthorngren

Have you tried going to other pages? The rows will be spread across all the pages in the table. LineData will display in 9 rows and Mtd will display in 12 rows. Looks like the rows displayed in the screenshot is 10 of the 12 Mtd rows.

It looks like you have some duplicated keys like Mtd.OriginalPlan and FullMonth.OriginalPlan. Only one of those will be displayed. You will need to somehow rename one of them.

Kevin

schinamanagonda

ya i see all the data but i want all the data should be shown in same rows i have line column in every list may be if i remove that that would work

kthorngren

You will need to combine the objects Mtd, LineData, etc into the rows as you want them displayed. Datatables expects each array element to contain the data for the row. Datatables doesn't have a built in way to combine the rows. See the Data docs for details.

You can do this in your server script. Or you can combine them in the $.getJSON function before populating the Datatable. Once you do this you can go back to using data.

Kevin

kthorngren

If you want to put together the test case with your data and an explanation of how the rows are to be combined we can update the test case to show how the data needs to be structured for Datatables. Or look at this nested objects example to see how each row is structured. Click on the Ajax tab to see the JSON data.

Kevin