Bootstrap Datatables Fluid layout

Bootstrap Datatables Fluid layout

rathinaganeshrathinaganesh Posts: 25Questions: 5Answers: 0
edited April 2015 in DataTables

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.

Answers

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • rathinaganeshrathinaganesh Posts: 25Questions: 5Answers: 0

    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.

  • rathinaganeshrathinaganesh Posts: 25Questions: 5Answers: 0

    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")
    `

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • rathinaganeshrathinaganesh Posts: 25Questions: 5Answers: 0
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • rathinaganeshrathinaganesh Posts: 25Questions: 5Answers: 0

    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.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    It should do.

    Allan

  • rathinaganeshrathinaganesh Posts: 25Questions: 5Answers: 0

    Thanks Allan.

  • rathinaganeshrathinaganesh Posts: 25Questions: 5Answers: 0

    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.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • rathinaganeshrathinaganesh Posts: 25Questions: 5Answers: 0

    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.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • rathinaganeshrathinaganesh Posts: 25Questions: 5Answers: 0
    edited May 2015

    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.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • rathinaganeshrathinaganesh Posts: 25Questions: 5Answers: 0

    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.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • rathinaganeshrathinaganesh Posts: 25Questions: 5Answers: 0

    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.

  • rathinaganeshrathinaganesh Posts: 25Questions: 5Answers: 0

    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.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    edited May 2015

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

  • rathinaganeshrathinaganesh Posts: 25Questions: 5Answers: 0

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

  • rathinaganeshrathinaganesh Posts: 25Questions: 5Answers: 0

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

    Thanks.

This discussion has been closed.