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

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

schinamanagondaschinamanagonda Posts: 38Questions: 5Answers: 0
edited September 2023 in DataTables 1.10

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

Answers

  • kthorngrenkthorngren Posts: 20,545Questions: 26Answers: 4,818

    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

  • schinamanagondaschinamanagonda Posts: 38Questions: 5Answers: 0
    edited September 2023
    {
        "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

  • kthorngrenkthorngren Posts: 20,545Questions: 26Answers: 4,818

    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

  • schinamanagondaschinamanagonda Posts: 38Questions: 5Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,545Questions: 26Answers: 4,818

    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

  • schinamanagondaschinamanagonda Posts: 38Questions: 5Answers: 0


    this is how my output object has

  • allanallan Posts: 62,211Questions: 1Answers: 10,205 Site admin

    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

  • schinamanagondaschinamanagonda Posts: 38Questions: 5Answers: 0

    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 ?

  • kthorngrenkthorngren Posts: 20,545Questions: 26Answers: 4,818

    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

  • schinamanagondaschinamanagonda Posts: 38Questions: 5Answers: 0
    edited September 2023

    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

  • kthorngrenkthorngren Posts: 20,545Questions: 26Answers: 4,818
    edited September 2023

    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

  • schinamanagondaschinamanagonda Posts: 38Questions: 5Answers: 0

    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

  • schinamanagondaschinamanagonda Posts: 38Questions: 5Answers: 0

    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;
    
  • schinamanagondaschinamanagonda Posts: 38Questions: 5Answers: 0

  • schinamanagondaschinamanagonda Posts: 38Questions: 5Answers: 0

    sorry i see data now but it is like this

  • kthorngrenkthorngren Posts: 20,545Questions: 26Answers: 4,818

    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

  • schinamanagondaschinamanagonda Posts: 38Questions: 5Answers: 0
    edited September 2023

    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

  • kthorngrenkthorngren Posts: 20,545Questions: 26Answers: 4,818
    edited September 2023

    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

  • kthorngrenkthorngren Posts: 20,545Questions: 26Answers: 4,818
    edited September 2023

    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

Sign In or Register to comment.