When search or select fields are added to data table headers or footers

When search or select fields are added to data table headers or footers

jimschmidtjimschmidt Posts: 29Questions: 11Answers: 0

Users are finding it very disorienting when a search field for a column is clicked and the table resorts. Why would a click on search cause a sort. This seems like a bug and not a feature.

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736

    This seems like a bug and not a feature.

    Not a bug or feature. You are using one header row with two event handlers; one for searching and one for sorting. You need to add the search inputs to a second header row. There are many threads with this question. Start with this thread and this thread.

    Kevin

  • jimschmidtjimschmidt Posts: 29Questions: 11Answers: 0

    SOme of the columns presented to the user have select and others have search options. Perhaps I am not understanding selection. I am setting a class type in the data definition and using the table API to dynamically add search or select. I see I need to make a second th row. I understand how to add a row but I am not able to add the search to the second th row.

    I do this at the start to the th section..

        $('#example thead tr').clone(true).appendTo( '#example thead' );
    

    My select column

                {
                    "data": "fields.user_defined_pre_decided_reason_text",
                    "defaultContent": "",
                    "visible": true,
                    "class": "select-filter"
                },
    

    My Search row ...

           {
                    "data": "fields.user_defined_merchant_number",
                    "visible": true,
                    "class": "search-filter"
                },
    
    
    
    
                     this.api().columns('.search-filter').every(function () {
                        var title = $(this).text();
                        var that = this;
    
                        $(this).html('<input type="text" placeholder="Search ' + title + '" class="column_search" />');
                        $( 'input', this ).on( 'keyup change', function () {
                            if ( table.column(i).search() !== this.value ) {
                                table
                                        .column(i)
                                        .search( this.value )
                                        .draw();
                            }
                        } );
    
    
                    });
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • jimschmidtjimschmidt Posts: 29Questions: 11Answers: 0

    Maybe I can solve it a different way.. How do I register the sorting to work based on the Sort Icons up and down instead of clicking on the table cell.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    Yep, this SO thread has a good answer to that - see the first column in Daniil's fiddle.

    Colin

  • jimschmidtjimschmidt Posts: 29Questions: 11Answers: 0

    I have one more question. I would like the sort icons to always appear next to the text describing the table column, the th text. I am dynamically adding an input or select element to a box.

    I have looked at ">https://stackoverflow.com/questions/28575810/jquery-datatables-left-align-sort-icon

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736

    Use orderCellsTop to move the sorting function to the top header row.

    Kevin

  • jimschmidtjimschmidt Posts: 29Questions: 11Answers: 0

    This approach is not using two rows. I read the previous comments about orderCells and indicated that we are dynamically adding rows and asked how to add rows to the second header row. We were not able to understand the response so we tried a different approach. What you are seeing in the image is one header cell.

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736

    Take a look at this thread for some examples I posted with two headers. Dynamically adding two header rows is likely going to be easier than trying to move the Bootstrap sorting images. I remember seeing some threads on the forum regarding placing the Bootstrap images. Seemed pretty complicated since they use the before pseudo element.

    Kevin

  • jimschmidtjimschmidt Posts: 29Questions: 11Answers: 0

    I understood how to do all of the above but I could not figure out how to add dynamic input and select boxes to the second header line. The example adds search to every header row before the table is created. I am adding the rows dynamically in the init method. Thanks.

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736
    Answer ✓

    I am adding the rows dynamically in the init method.

    Can you provide an example of how you are doing this?

    The example adds search to every header row before the table is created.

    They can be moved to initComplete, for example:
    http://live.datatables.net/sanuwidi/1/edit

    It dynamically creates the second header and applies the correct search input type based on class. Didn't modify the code much from teh other examples much to make it work.

    Kevin

This discussion has been closed.