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

vimi.lad

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
       
    });

colin

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.lad

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.

colin

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.lad

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.lad

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

colin

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.lad

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