HTML javascript dynamic table resizing

Question

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.

Can you provide a working fiddle showing what you actually have? — Yuri
– Yuri, Commented Mar 18, 2016 at 14:49
I do not have it on a server .. it's local HTML coding and i can't post it here since it's a lot of coding (a lot of rows in the table) ... Take the example on the website i provided .. i took that source code put it on my own HTML file and it doesn't seem to do the table resize <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> — civic.sir
– civic.sir, Commented Mar 18, 2016 at 14:52
It's hard to give you any advice if we acn't see your code. Could be a problem of css, or scripts inclusions, or script version and so on... I just copy-pasted the code to jsfiddle and it works jsfiddle.net/mwwp9b7m — Yuri
– Yuri, Commented Mar 18, 2016 at 15:12
@Yuri I'm probably putting the JS Script in the wrong place ... should they go at the bottom of the table </table> as <script language="javascript" type="text/javascript"> and close it with </script> or should they go in a separate file and reference it? — civic.sir
– civic.sir, Commented Mar 18, 2016 at 15:18
I usually put <script> at the bottom page as it speed up content loading, but if you use $(document).ready(....), your js code will be executed only when the page is fully loaded, whether you put it in <head> or <body> — Yuri
– Yuri, Commented Mar 18, 2016 at 15:20

CMedina · Accepted Answer · 2016-03-18 15:00:38Z

1

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/

answered Mar 18, 2016 at 15:00

CMedina

4,2824 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

civic.sir Over a year ago

Sorry ignorant question you know the javascript .. do i put it on the bottom of the table or should i create a new .js file and link it using <script type="text/javascript" language="javascript" src="dataTable.js"></script> in the head node. Sorry not an expert on html coding

CMedina Over a year ago

@civic.sir no problem

Collectives™ on Stack Overflow

HTML javascript dynamic table resizing

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related