How to put individual column filter inputs at top of columns?

How to put individual column filter inputs at top of columns?

MikeSMikeS Posts: 113Questions: 1Answers: 0
edited April 2014 in DataTables 1.10
I've tried to modify the column filter using text box inputs example to move the inputs to the top of the columns as seen here, http://jsfiddle.net/s8F9V/.

It works, but, the inputs now also trigger the column sorting when I click in them. The column header text no longer triggers the sort.

How can I have it such that the column header text triggers the sorting and have the text box input filter the content?

Replies

  • daniel_rdaniel_r Posts: 460Questions: 4Answers: 67
    edited April 2014
    You can add onclick="stopPropagation(event);" to you inputs
    where stopPropagation is

    [code]
    function stopPropagation(evt) {
    if (evt.stopPropagation !== undefined) {
    evt.stopPropagation();
    } else {
    evt.cancelBubble = true;
    }
    }
    [/code]

    That's what I'm doing in my yadcf plugin http://yadcf-showcase.appspot.com/multiple_tables.html and it works just fine

    Working fiddle: http://jsfiddle.net/s8F9V/1/
  • MikeSMikeS Posts: 113Questions: 1Answers: 0
    Thanks for the updated fiddle daniel_r.

    It's a bit better, however, when I click on the column header text (like "Name"), the column does not sort. I suspect that it needs just a little more tweaking :)
  • MikeSMikeS Posts: 113Questions: 1Answers: 0
    BTW, I'm using dataTables version 1.10 beta 2!!
  • MikeSMikeS Posts: 113Questions: 1Answers: 0
    edited April 2014
    Allan,

    Are you able to see anything obvious in my jsfiddle example that would prevent version 1.10 beta 2 from having the column filter text boxes in the header?

    I was hoping to have the input boxes at the top of the column (moved from your example where they are in the footers) and keep the header text as the trigger to sorting the column.

    Is that not possible in this version?
  • allanallan Posts: 53,983Questions: 1Answers: 8,414 Site admin
    Use `orderCellsTop` to have DataTables attach the sort listener to the top row in the header: http://jsfiddle.net/s8F9V/3/ .

    Docs: http://next.datatables.net/reference/option/orderCellsTop

    Allan
  • MikeSMikeS Posts: 113Questions: 1Answers: 0
    Allan, thank you for pointing out that truly hidden gem. I would never have thought to try looking for such a feature in the reference documentation.
  • allanallan Posts: 53,983Questions: 1Answers: 8,414 Site admin
    Its a useful option for certain. Its a little limited in that it is binary at the moment, so its either the top or bottom cells, not a mix of both, or a middle row, but that appears to cover about 99% of use cases!

    Allan
  • gallivagalliva Posts: 1Questions: 0Answers: 0
    edited July 2014

    Try this:

    "initComplete": function () {
    var r = $('#MyDataTable tfoot tr');

    // if you are using bootstrap, set the correct padding

    r.find('th').each(function(){

    $(this).css('padding', 8);

    });

    $('#MyDataTable thead').append(r);

    },

  • ShadeShade Posts: 3Questions: 0Answers: 0

    Hi,

    This works great for me except in one instance:

    • When I use ColVis with column-filters, the colVis check does not hide the input.

    What happens is the column hides (like its suppose to), but the input and header stay visible.

    Anyway to make the input disappear with the column when using ColVis?

  • vogomatixvogomatix Posts: 38Questions: 3Answers: 7

    It's dubious in terms of W3C standards but having a separate thead block for the filters also works in IE, Firefox and Chrome..... :-)

  • navjeetnavjeet Posts: 1Questions: 0Answers: 0

    use this css in jquery.dataTables.css.......This is worked to put search boxes with header of table..... :) enjoye

    tfoot {
    display: table-header-group;
    }

  • allanallan Posts: 53,983Questions: 1Answers: 8,414 Site admin

    Heh - nice trick. I like it :-)

    Thanks for sharing that with us.

    Regards,
    Allan

  • vivekanandvivekanand Posts: 3Questions: 0Answers: 0

    @allan, orderCellsTop thing works well, but when I use "scrollX": true, search is not happening

    http://jsfiddle.net/s8F9V/26/

    Just updated the below code in your fiddle

    var table = $('#example').DataTable( {
    "orderCellsTop": true ,
    "scrollX": true,
    } );

  • allanallan Posts: 53,983Questions: 1Answers: 8,414 Site admin

    Have a look at this discussion: https://datatables.net/forums/discussion/24068 which deals with a similar issue, just in the footer.

    Allan

  • vivekanandvivekanand Posts: 3Questions: 0Answers: 0

    Thanks allan, it was informative, but I am not able to reproduce it in my scenario for some reason. Can you give me an example for the fiddle I've given above ?

    I just started learning js, so I might have missed something very obvious while trying it.

  • allanallan Posts: 53,983Questions: 1Answers: 8,414 Site admin

    Easiest option is just to reorder the code and but the event handler before the DataTables initialisation: http://jsfiddle.net/s8F9V/27/ .

    Allan

  • vivekanandvivekanand Posts: 3Questions: 0Answers: 0

    @allan, thanks a lot, its perfect ...

  • techupintechupin Posts: 7Questions: 2Answers: 0

    @allan, thanks. that really helped!!!

This discussion has been closed.