Complex headers versus individual column filtering

Complex headers versus individual column filtering

tangerinetangerine Posts: 3,342Questions: 35Answers: 394

It seems that complex headers ( http://datatables.net/examples/advanced_init/complex_header.html ) are incompatible with individual column filtering ( http://datatables.net/examples/api/multi_filter.html ) . It looks fixable, but sadly not by me. Does anyone have a fix?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

    This is just a copy and paste of the header code from the complex header example and the init from the filter example: http://live.datatables.net/tiqofeda/1/edit . It appears to work as expected for me. Does it not for you?

    Allan

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    Hi Allan.
    No, your example is not working for me. (Firefox - although I don't see how it would be a browser issue.)

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

    How bizarre! I've just fired it up in Firefox and it seems to work no problem.

    What aspect isn't working for you? The filtering, or something else? Or are you getting a JS error?

    Allan

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394
    edited November 2014

    Hmmm......where to start?
    Well, the HTML thead and tfoot columns don't match.

      <thead>
                <tr>
                    <th rowspan="2">Name</th>
                    <th colspan="2">HR Information</th>
                    <th colspan="3">Contact</th>
                </tr>
                <tr>
                    <th>Position</th>
                    <th>Salary</th>
                    <th>Office</th>
                    <th>Extn.</th>
                    <th>E-mail</th>
                </tr>
            </thead>
    
            <tfoot>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
              </tr>
            </tfoot>
    

    Then, the displayed table headers look like this:

    [HR Information] [Contact]

    [Name] [Position] [Salary] [Office] [Extn.] [E-mail]

    but the footers line up like this:

    [Name] [HR Information] [Contact] [Position] [Salary] [Office]

    (I use square brackets for the sake of legibility. The colspan headers "HR Information" and "Contact" cover "Position/Salary/Office" and "Extn./E-mail" respectively.)

    Even if the "HR Information" filter is intended to operate on Position, Salary, and Office,
    which I might understand - but wouldn't like! - it still doesn't work. What are you seeing that's different from the above?

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin
    Answer ✓

    Oh I see - so its the placeholders that aren't working for you? I was looking at the overall table rather than a specific part.

    The placeholders are easily solved by just using the information from the footer cells rather than the header: http://live.datatables.net/tiqofeda/2/edit .

    Allan

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    Got it - many thanks!

This discussion has been closed.