Dynamic Complex Headers

johnblythe

Hi there,

I'm attempting to build a Datatable on the fly. There are 7 fields that are guaranteed to be present. Once vendors begin interacting with the data contained in those 7 fields their inputted data will begin to show up. This will be an item comparison for the purchaser who is getting bids on changing suppliers.

I've got everything pulling in correctly data-wise. I need to begin grouping the vendor's info by vendor with rowspan and colspan (http://datatables.net/examples/basic_init/complex_header.html). I'm currently passing in the columns dynamically like so: columns": data.columns in the dataTable() init.

I'm not seeing anything as of yet and am about to just start tinkering to see what I can come up with. Wanted to throw a line out there preemptively. Will report back if I crack it.

Best,

allan

Hi,

Currently there is no option to have DataTables dynamically create complex headers. In part because I just can't think of a good way to be able to represent the combinations that are possible beyond what the DOM has, and in part because I would be concerned about the amount of additional code that would need to be added to the library (it is already almost at the limit of size that I want for the core library!).

Your best bet is to use jQuery / DOM to create the complex header and then initialise DataTables on top of that.

Allan

johnblythe

Cool. I was afraid of that, but totally understandable.

I've opted for the moment to just create the table entirely in PHP after having fetched the data.

I'd much prefer to get the data handled by my Datatable so I can use server side processing since some of these instances will have thousands of line items, with anywhere from 10-50 columns of data depending on how many bids are in place.

I'm stuck though in thinking through how to get DT to associate the data with the appropriate column when I don't know which columns exist till they actually do. If it's any help, here's what the data looks like:

0: {
    Conversion: "1"
    Description: The description
    Item: Product1234
    Qty: "1"
    Total Spend: "209"
    UoM: "EA"
    Vendor: ABC CORP
    vendor1: {
        Vendor: "XYZ Corp", 
        Projected Spend: "3150",
        Item: Product456,
        ...
    },
    vendor2: {
        Vendor: "Super Corp", 
        Projected Spend: "199",
        Item: Product987,
        ...
    }
}

that'd be one row. the first 7 items are what are guaranteed. the 'vendorX' objects contain the bids that follow. there could be 0, there could be 10.

any hope for me? :p

allan

You can still use server-side processing, it is just the complex headers that you would need to create using jQuery / DOM.

I'm stuck though in thinking through how to get DT to associate the data with the appropriate column when I don't know which columns exist till they actually do.

You need to decide (probably when you create your headers) what columns should be associated with what data. You could create an array that is passed to the columns option and uses columns.data to do that.

Allan

johnblythe

Ooo. So if I pass in an array of objects with "data": x to the columns option it'll leave my actual columns (read: headers) alone and fill in the appropriate data? Nice!

allan

Sounds correct :-)

Allan

johnblythe

Ok cool. Will return to this in a week or so after it passes a customer early next week. Will let you know how it turns out. Thanks!