Datatables Responsiveness - Searchbar (bootstrap) -
i have started implement datatables in project. project based on bootstrap 3. have build package necessary files on datatables download-page , created simple datatable based on docs. works fine, have problem responsiveness. have @ following screenshot:
as see. search-bar has problems.
the table has following html:
<table width="100%" class="table table-striped table-bordered dt-responsive table-condensed table-hover" id="event_history" cellspacing="0">
.......
the table has following js:
var table = $('#event_history').datatable({ responsive: true, colreorder: true, lengthchange: true, "order": [[ 0, "desc" ]], });
perhaps can me solve this.
thank you!
controls in datatables bootstrap styling wrap nicely when table occupies full page width, see this example.
however think you're showing table in panel doesn't occupy full page width, prevents col-
rules being applied, shown in this example. can use special crafted value dom
option configure column layout 1 specific table based on expected container sizes.
for example:
var table = $('#example').datatable({ responsive: true, dom: "<'row text-center'<'col-xs-12'l><'col-xs-12'f>>" + "<'row'<'col-xs-12'tr>>" + "<'row text-center'<'col-xs-12'i><'col-xs-12'p>>" });
see this example code , demonstration.
Comments
Post a Comment