Bootstrap Datatables Fluid layout

rathinaganesh

Greetings,

I am combining bootstrap with Fluid Layout, but when I resize the page, the table is not getting resized as well.

Here is my table definition -

<div class="row" >
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div style="text-align:left;cursor:pointer;" class="panel-heading bordered-blue" id="systeminfo-header-div">
                 <span id="systeminfo-span" class="glyphicon glyphicon-chevron-right"></span>
                 System Information
            </div>
            <!-- /.panel-heading -->
        <div class="panel-body">
        <table id="SystemInfoRepeater" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>Site</th>
                <th>Name</th>
                <th>Model</th>
                <th>Test1</th>
                <th>Vendor</th>
                <th>Serial</th>                
            </tr>
        </thead>
        </table>        
        </div>
    </div>
  </div>
</div>

Here is the javascript code -

table = $(divId).DataTable({
                stateSave: true,
                columns: columns,
                data:items,
                tableTools: {
                    sRowSelect: "os",
                    //sRowSelector: 'td:first-child',
                    aButtons: [
                        { sExtends: "editor_create", editor: editor, sButtonClass: 'btn btn-success' },
                        { sExtends: "editor_edit",   editor: editor, sButtonClass: 'btn-primary'},
                        { sExtends: "editor_remove", editor: editor, sButtonClass: 'btn-danger'}
                    ]
                },                            
                "dom": "<'row' <'col-xs-6 col-sm-3'T><'col-xs-6 col-sm-3'><'col-xs-6 col-sm-3'f><'col-xs-6 col-sm-3'C>r><'row't><'row'<'col-xs-4'l><'col-xs-3'i><'col-xs-5'p>>",                       
                "colVis": {
                    "buttonText": "Select Columns",
                    "bRestore": true,
                    "activate": "click"
                }
            } );                       

I even tried changing the row to row-fluid, but I do not see any css styles for row-fluid.

Thanks.

allan

Can you link to a page showing the problem so it can be debugged please? It sounds like there is an element somewhere that is forcing the width.

Allan

rathinaganesh

I have tried to create the same in jsfiddle but for some reasons, I am not able to reproduce it. Here is the link to jsfiddle -
https://jsfiddle.net/h25opw8u/14/

Here is the final html rendered in my page -
html <table id="SystemInfoRepeater" class="table table-striped table-bordered dataTable no-footer DTTT_selectable" cellspacing="0" role="grid" aria-describedby="SystemInfoRepeater_info"> <thead> <tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="SystemInfoRepeater" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Site: activate to sort column descending" style="width: 44px;">Site</th><th class="sorting" tabindex="0" aria-controls="SystemInfoRepeater" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 62px;">Name</th><th class="sorting" tabindex="0" aria-controls="SystemInfoRepeater" rowspan="1" colspan="1" aria-label="Model: activate to sort column ascending" style="width: 65px;">Model</th><th class="sorting" tabindex="0" aria-controls="SystemInfoRepeater" rowspan="1" colspan="1" aria-label="Mac: activate to sort column ascending" style="width: 48px;">Mac</th><th class="sorting" tabindex="0" aria-controls="SystemInfoRepeater" rowspan="1" colspan="1" aria-label="Vendor: activate to sort column ascending" style="width: 73px;">Vendor</th><th class="sorting" tabindex="0" aria-controls="SystemInfoRepeater" rowspan="1" colspan="1" aria-label="Serial: activate to sort column ascending" style="width: 60px;">Serial</th></tr> </thead> <tbody><tr role="row" class="odd"><td class="sorting_1">San</td><td>Switch-1</td><td>P 5101</td><td>1a:2b:3c:4d:5e</td><td>Pica8</td><td>D23309876</td></tr></tbody></table>
Here is the css rendered -

element.style { } table.table-bordered.dataTable { /* dataTables.bootstrap.css */ border-collapse: separate !important; } table.dataTable { /* dataTables.bootstrap.css */ clear: both; margin-top: 6px !important; margin-bottom: 6px !important; max-width: none !important; } .table-bordered { /* bootstrap.css */ border: 1px solid #dddddd; } .table { /* bootstrap.css */ width: 100%; //deleted max-width: 100%; //deleted margin-bottom: 20px; } table { /* bootstrap.css */ background-color: transparent; } table { border-collapse: collapse; border-spacing: 0; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } table[Attributes Style] { border-spacing: 0px; } user agent stylesheettable { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; }
I even commented out the .table width:100% in bootstrap.css
Not sure where the issue is.

rathinaganesh

Also, here is the order of css -
` css
link(rel='stylesheet', href='js/library/bootstrap-3.2/dist/css/bootstrap.css')
link(rel='stylesheet', href='js/library/bootstrap-3.2/dist/css/bootstrap-theme.css')
link(rel='stylesheet', href='css/multi-select.css')
link(rel="stylesheet", href="js/library/metisMenu/dist/metisMenu.min.css")

link(rel="stylesheet", href="js/library/datatables/media/css/dataTables.colVis.css")
link(rel="stylesheet", href="js/library/datatables/media/css/dataTables.bootstrap.css")
link(rel="stylesheet", href="js/library/datatables/media/css/editor.bootstrap.css")

link(rel='stylesheet', href='js/library/fontawesome/css/font-awesome.min.css')
link(rel='stylesheet', href='js/library/jstree/dist/themes/default/style.min.css')
link(rel='stylesheet', href='js/library/jquery.tablesorter/css/theme.default.css')
link(rel='stylesheet', href='js/library/parsleyjs/src/parsley.css')
link(rel="stylesheet", href="js/library/morrisjs/morris.css")
link(rel='stylesheet', href='css/fuelux.css')
link(rel='stylesheet', href='css/fuelux-responsive.min.css')
`

Here are the order of javascript files -

` js
script(src='js/library/jquery/dist/jquery.js')
script(src='js/library/bootstrap/dist/js/bootstrap.js')
script(src='js/library/socket.io-client/socket.io.js')
script(src='js/library/bootbox/bootbox.js')
script(src='js/library/underscore/underscore.js')
script(src='js/backbone.js')
script(src='js/library/jstree/dist/jstree.js')
script(src='js/library/parsleyjs/dist/parsley.js')
script(src='js/library/validator-js/validator.js')
script(src='js/library/handlebars/handlebars.js')
script(src='js/library/jquery.serializeJSON/jquery.serializejson.js')
script(src='js/library/js-xlsx/dist/jszip.js')
script(src='js/library/js-xlsx/dist/xlsx.js')
script(src='js/library/spin.js/spin.js')
script(src='js/library/jquery.tablesorter/js/jquery.tablesorter.js')
script(src='js/library/jquery.tablesorter/js/jquery.tablesorter.widgets.js')
script(src='js/library/jquery.tablesorter/js/widgets/widget-columnSelector.js')

script(src="js/library/metisMenu/dist/metisMenu.js")
script(src="js/library/raphael/raphael.js")
script(src="js/library/morrisjs/morris.js")
script(src="js/library/fuelux/fuelux.js")

script(src="js/library/datatables/media/js/jquery.dataTables.js")
script(src="js/library/datatables/dataTables.tableTools.js")
script(src="js/library/datatables/media/js/dataTables.editor.js")
script(src="js/library/datatables/dataTable.colVis.js")
script(src="js/library/datatables/dataTables.colVis.js")
script(src="js/library/datatables/dataTables.bootstrap.js")
script(src="js/library/datatables/editor.bootstrap.js")
`

allan

Thanks for the code, but I'm afraid that without being able to reproduce the bug there isn't a huge amount of help I can offer as I'm not sure what the issue is. Can you link to the page you are developing please.

Allan

rathinaganesh

Here is the link to my page -

http://ec2-54-67-53-252.us-west-1.compute.amazonaws.com:3000/analytics

Thanks.

allan

Thank you for the link. It looks like the table is resizing at larger screen widths, but as soon as you make the window so small that the table is at it's minimum possible width and it can't get any small it starts to overflow the container.

You could consider using the Responsive to address this.

Allan

rathinaganesh

Thanks. But Responsive will not work with Inline editing right? Is there a way to achieve both Responsive and Inline editing at the same time.

Thanks.

allan

It should do.

Allan

rathinaganesh

Thanks Allan.

rathinaganesh

Also, I had two tables in the same page and tried editors with both the tables but got the following error -

Cannot read property 'blurOnBackground' of undefined

in dataTables.editor.js

Can you please tell me if you have any idea to resolve this? I have the sample in the url listed -

http://ec2-54-67-53-252.us-west-1.compute.amazonaws.com:3000/analytics

Thanks.

allan

Can you tell me how to trigger the error please? I've just played around with your page a little and couldn't get that error.

Thanks,
Allan

rathinaganesh

When I click on a row on table 1 and try to edit a value in a cell and then tab to change the value of the next cells within the same row and then I click on row 1 in table 2 simultaneously and try to change the value in cell 1 in table 2 I get the error.

allan

Thank you - it looks like there is a problem when two tables on the same page both have inline editing enabled. Each Editor instance doesn't "know" which field belongs to which and thus that creates the problem.

I'll post back here when I've been able to debug this further and find a fix. For the moment, the workaround is to not use inline editing on a page where there are two tables.

Allan

rathinaganesh

Thanks Allan. Appreciate it.

On the side lines, I have few questions regarding styling of the table.

1. When I edit a cell and tab to the next cell, the style of entire row changes and alternates. The row color shifts between selected (blue) color to white color when I tab between one cell to another cell in that row. Is there any conflict? Also, the highlighted and currently editing row width becomes slightly bigger.

2. Is there a way to reload the data by clicking a refresh button within the datatables toolbar without rebuilding the entire datatable? Just reloading the data.

3. The editor buttons is not having any space between them. How can I achieve it?

4. I changed the colvis button text but the page did not reflect it.

Thanks.

allan

1) Yes there is a conflict. You have row selection + inline editing activated on click. You might want to take a look at this example to see one possible option of addressing that.

2). Yes, just call ajax.reload()

3) You would need to add a little CSS to the page to add some margin between the buttons. The Bootstrap buttons do not have that by default.

4) Could you update to ColVis 1.1.2 (it looks like you have a 1.1.0 prerelease version atm).

Allan

rathinaganesh

Hi Allan,

Thanks for the response. I see a bunch of issues with the solution #1. It is spoiling the styles and affecting the page. I have it in the same link.

Here are the issues I am facing.

1. I have a non-editable/table with more than 20 columns and I want them to have horizontal scrollbars, so that the user can scroll through all the columns. I can achieve the same with responsive but the users do not like the responsive + extension button at the very beginning of each row. Also, responsive seems to have side effects if used with horizontal scrolling.

2. When I add a checkbox at the beginning of each row like you said to avoid conflicts between row selection and inline editing, it seems to affect all the tables and includes a checkbox for all the tables.

All I want is one non-editable table with horizontal scrolling and one editable table with either responsive config or horizontal scrolling. But doing these affects the styles adversely on these data tables. I find it painful to make them all work in conjunction. Is there a better solution?

Thanks.

rathinaganesh

Here is the link

http://ec2-54-67-53-252.us-west-1.compute.amazonaws.com:3000/analytics

allan

Also, responsive seems to have side effects if used with horizontal scrolling.

Responsive should not be used with horizontal scrolling. The whole point of Responsive is that it negates the need for horizontal scrolling! If you want horizontal scrolling, disable Responsive.

When I add a checkbox at the beginning of each row like you said to avoid conflicts between row selection and inline editing

I would suggest adding a class to the table where you want the checkbox to appear ("checkbox" for example) and then modifying the CSS selectors fo rhte checkboxes to simply operator only on tables with that class.

Allan

rathinaganesh

Thanks Allan. When I commented out the responsive attribute from the datatable configuration. I am not seeing the horizontal scroll bar at all. I am having trouble with the horizontal scrolling altogether without the responsive.

There are some tables which needs responsive and some tables which needs horizontal scrolling. I believe, that can be achieved.

rathinaganesh

I am sorry, I see the horizontal scroll bar but I don't see it right away. I have to go to the particular table and click on it to see the scroll bar. Is this the right behavior? Can we make the scroll bar visible without even clicking on the table?

Also, There are some tables which needs responsive and some tables which needs horizontal scrolling. I believe, that can be achieved.

allan

I'm afraid I don't really understand. What do you mean "go to the particular table"?

rathinaganesh

I meant when I click on the table. The scrollbar is visible on the data table only if I click on the data table.

rathinaganesh

Got it Allan. There was some conflict in my stylesheet.

Thanks.