Select Filter in Table header

Select Filter in Table header

gauravguptaingauravguptain Posts: 2Questions: 0Answers: 0
edited February 2011 in General
Hey,

I added select filter like showing in example(http://datatables.net/examples/api/multi_filter_select.html). Instead of tfoot I added that in thead. Now when I click on select box it doesn't open the drop down instead sorting is triggered.
Is there any way to suppress the click event which clicked on select box?

Replies

  • mgmg Posts: 47Questions: 0Answers: 0
    Hi gauravguptain,

    When you added the select filter to the thead, what kind of markup did you use?

    If you tried to add the element directly in the
    that gets sorted, I think you may run into trouble:

    [code]


    Col 1 ....
    Col 2 ....
    Col 3 ....


    [/code]
    However, you may have more success if you try an approach similar to this:
    [code]


    Col 1
    Col 2
    Col 3


    ....
    ....
    ....



    ...

    /* Add a select menu for each TD element in the table header */
    $("thead td").each( function ( i ) {
    this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
    $('select', this).change( function () {
    oTable.fnFilter( $(this).val(), i );
    } );
    } );
    [/code]
  • TrollchikTrollchik Posts: 80Questions: 1Answers: 0
    I ahve the same, but i have the select options in the header. And i met the next problem:

    when i click on the select, the table began to invoke sorting function! i don't nee it. How to prevent sorting when i click exactly on the select element and don't prevent when i click on the header ??

    Thanks in advance!
  • TrollchikTrollchik Posts: 80Questions: 1Answers: 0
    ok, i fixed the problem! i edit _fnBindAction like:

    [code]
    .bind( 'click.DT', oData, function (e) {
    if( j(e.target).is('select')){
    return false;
    }else{
    fn(e);
    n.blur(); // Remove focus outline for mouse users
    }
    n.blur(); // Remove focus outline for mouse users
    } )
    [/code]
  • sunmit9sunmit9 Posts: 19Questions: 1Answers: 0
    edited May 2012
    Hi, I am new to Data Tables. I am trying to display the select option for a particular column. I have tried using the code in http://www.datatables.net/examples/api/multi_filter_select.html but somehow I am not able to view the select toolbar. I would also like to know as where to keep the code and include it in my existing JSP. Can someone please help!
This discussion has been closed.