Individual column search is not working with Horizontal scroll on (scrollX = true) at a time

Individual column search is not working with Horizontal scroll on (scrollX = true) at a time

vimi.ladvimi.lad Posts: 10Questions: 2Answers: 0
edited January 2019 in Free community support

I have table created column dynamically and bind JSON data to it using Jquery. Implement coumn search on Document.Ready function and column search working fine. but when I set scrollX= true to implement horizontal scroll and fixcolumn then horizontal scroll apply to table but column search stop working with it.

Can you guide me how to work together column search and horizontal scrollbar and fixcolumn together..

sample code

Column search

  $j('#tblMasterList tfoot th').each(function () {
        var title = $j(this).text();
        $j(this).html('<input type="text" placeholder="Search ' + title + '" />');
    });

    // DataTable
    var table = $j('#tblMasterList').DataTable();
   
    // Apply the search
    table.columns().every(function () {
        var that = this;

        $j('input', this.footer()).on('keyup change', function () {
            debugger;
            if (that.search() !== this.value) {
                that
                    .search(this.value)
                    .draw();
            }
        });
    });

    var r = $j('#tblMasterList tfoot tr');
    r.find('th').each(function () {
        $j(this).css('padding', 8);
    });
    $j('#tblMasterList thead').append(r);
    $j('#search_0').css('text-align', 'center');

DataTable binding with columns and JsonData

  $j('#tblMasterList').DataTable({
       
        data: jsondata,
        columns: vCols,
        scrollX: true
       
    });

Answers

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

    Hi @vimi.lad ,

    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

  • vimi.ladvimi.lad Posts: 10Questions: 2Answers: 0

    Hi Colin,
    Thanks for response.
    I have created test cases for
    1. column search and
    2. Column search + Horizontal scroll + fix column
    Column search on top is working fine with test cases 1.
    URL : http://live.datatables.net/wimihuhe/2/edit

    Where Column search + Horizontal + Fix column Test cases 2
    URL: http://live.datatables.net/kogeyule/1/edit.
    When I added
    scrollX: true,
    fixedColumns: {
    leftColumns:1,
    rightColumns: 0
    }

    In the Java script then
    Column search boxes will reside in the bottom, If I remove then it will stay on top As i added code of padding to place all boxes after header.

    so Column search + Horizontal scroll + fix column are not working properly.

    Kindly resolved this issue or guide accordingly.

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

    Hi @vimi.lad ,

    Just to be clear, there's two test cases - which is the one with the problems?

    Column search boxes will reside in the bottom, If I remove then it will stay on top As i added code of padding to place all boxes after header.

    Not sure what you mean there. Are you saying you don't want them in the footer, you want them in the header?

    Cheers,

    Colin

  • vimi.ladvimi.lad Posts: 10Questions: 2Answers: 0

    Hi Colin,

    You are getting correct.

    Belowmentioned case having problem.
    Column search + Horizontal + Fix column Test cases 2
    URL: http://live.datatables.net/kogeyule/1/edit.

    Yes. I want Search boxes on top Header and in second row Search box and also
    Fix column and Horizontal scroll bar with this.

    I have added code to place search boxes in 2nd row after Header.
    But If i add code to appear horizontal scroll bar and Fix column, then it will automatically place in the bottom.

    Give me resolution to column search boxes on top in 2nd row(after header ) with header as well as Horizontal scroll bar and fix column also.

  • vimi.ladvimi.lad Posts: 10Questions: 2Answers: 0

    See Output of both cases to identify problem.

    Only code difference in the Java script file in the 2nd case
    URL: http://live.datatables.net/kogeyule/1/edit.
    i.e added this much code ,

    scrollX: true,
    fixedColumns: {
    leftColumns:1,
    rightColumns: 0.

    How to achieve all(Column search on top after header column + Horizontal scroll bar + Fix columns) together

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

    Hi @vimi.lad ,

    This here should do the trick. It's the same as yours but working with the input elements in all columns.

    Cheers,

    Colin

  • vimi.ladvimi.lad Posts: 10Questions: 2Answers: 0

    Thanks for the ready made example. It is perfectly working the way I want.

This discussion has been closed.