Understanding DataTables and how to manipulate

Understanding DataTables and how to manipulate

sjw01sjw01 Posts: 67Questions: 36Answers: 1

I have been implementing just about everything in my table re-using examples but I am at my wits end trying to access a datatable and perform manipulation outside of provided examples. The documentation only shows a handful of examples and is probably aimed at people far above my intelligence level so I have a very basic understanding of how everything pulls together.

I have a DataTable: http://live.datatables.net/lidequra/9/edit

What I am trying to do is remove the filtering from the first row (because when exporting to csv, it creates really ugly header rows) and add it to a footer or even better, 2nd header row.

I have tried implementing: https://datatables.net/extensions/fixedheader/examples/options/columnFiltering BUT i want to use a dropdown select instead of an input and this is where my code comes crashing down no matter what I try.

  1. Example: http://live.datatables.net/lidequra/21/edit - The code wont work with my Datatable - 1. Put the code below the DT init = A duplicated header with sorting carets etc. because the row is duplicated after orderCellsTop: true, fixedHeader: true, 2. Put the code above the DT init = nothing

  2. Using this model, I added the select using the title but the title is all the elements in the select so it ends up like this: http://live.datatables.net/lidequra/22/edit

  3. I empty the title and obviously can't reference it again: http://live.datatables.net/luwuguwa/1/edit

  4. I then try to use code from this example that filters using selects to fill the select: https://datatables.net/examples/api/multi_filter_select.html and I get column is not defined http://live.datatables.net/telabuji/1/edit (Onviously because column is jQuery and not DataTable object... But can't find anywhere how to get the DataTable reference...

  5. So I try getting the DataTable Reference in the createdRow section but clone() is a jQuery method, not DataTable...

It just feels like there is a problem at every turn and I clearly have a poor grasp on the DataTables and the examples aren't helping...

I think the documentation needs more examples because what works one way, doesn't work another... objects available in one initialisation aren't available in another... I am completely confused.

Answers

  • colincolin Posts: 15,237Questions: 1Answers: 2,598

    Hi @sjw01 ,

    Take a look at the example I just did for this thread, it sounds very similar to what you want - double headers so it doesn't affect the export and ordering. Could you have a play integrating those ideas into your example, and if no joy, let us know, and I'll take a look,

    Cheers,

    Colin

  • allanallan Posts: 63,160Questions: 1Answers: 10,406 Site admin

    The big limitation you are running into here, and the one which I think is the root of the frustration, is that DataTables' automatic column generation does not currently allow for multiple rows to be created in the table header. The automatic generation will only insert a single cell for each column.

    What you have to do here is either:

    1. Define the header in the HTML like in the examples you linked to
    2. Create it using jQuery before you initialise the DataTable.

    I realise that is frustrating and it is something I want to address in a future version of DataTables - by defining the syntax to use for how to describe a complex header (multiple rows / colspan / rowspan) isn't trivial.

    Allan

This discussion has been closed.