CODEWITHSUNDEEP
javascriptjqueryhtmldatatableshtml-table
civic.sir
civic.sir

Reputation: 410

HTML javascript dynamic table resizing

I am trying to replicate this example
http://www.datatables.net/release-datatables/examples/api/multi_filter.html

When there is a large table it'll resize to 10 entries and page them accordingly. I don't need anything else ie. Don't need the Search bar

Currently I got the JS script from the website but I'm having trouble implementing this. Could someone please help me out. I have a table like so <table id="example" class="display" cellspacing="0" width="100%"> with a thead and tfoot with this JavaScript code

    <script type="text/javascript" class="init">

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

    // DataTable
    var table = $('#example').DataTable();

    // Apply the search
    table.columns().every( function () {
        var that = this;

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

    </script>

Right now it is not resizing the table. This might be a really basic implementation but I can't seem to get it working. Please help.

Upvotes: 0

Views: 868

Answers (1)

CMedina
CMedina

Reputation: 4222

Add CSS in your HTML

tfoot input {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

Its solve your problem?

Result: https://jsfiddle.net/cmedina/7kfmyw6x/20/

Upvotes: 1

Related Questions