CSS conflict while combining Bootstrap and Datatables

rathinaganesh

Greetings,

I am using datatables and bootstrap 3. Everything is fine except some of the styles like column sorter and pagination.
The column sorter shows two icons one from datatables and another from bootstrap.
I was just following the example listed in
https://editor.datatables.net/examples/inline-editing/tabControl.html

Also, the pagination does not seem to be with correct style.

Here is how I load the js -
`
script(src='js/library/jquery/dist/jquery.js')
script(src='js/library/bootstrap/dist/js/bootstrap.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")

Here is the 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="js/library/datatables/media/css/jquery.dataTables.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')
`

Here is the javascript code where I initialize the datatables -
`
var editor = new $.fn.dataTable.Editor( {
ajax: setUrl,
table: divId,
fields: fields
});

        var table = $(divId).DataTable({
            stateSave: true,
            columns: columns,
            data:items,
            tableTools: {
                sRowSelect: "os",
                sRowSelector: 'td:first-child',
                aButtons: [
                    { sExtends: "editor_create", editor: editor },
                    { sExtends: "editor_edit",   editor: editor },
                    { sExtends: "editor_remove", editor: editor }
            ]
            },
            "dom": 'TClfrtip',
    //"oColVis": { "buttonText": "<span class='caret' />","sLabel": "Customize your view: ","bLabel": true }                
            "colVis": {
                "buttonText": "Select Columns",
                "bRestore": true,
                "activate": "click"
            }
        } );                            

        editor.on( 'open', function ( e, type ) {
                    if ( type === 'inline' ) {
                        // Listen for a tab key event when inline editing
                        doc.on( 'keydown.editor', function ( e ) {
                            if ( e.keyCode === 9 ) {
                                e.preventDefault();

                                // Find the cell that is currently being edited
                                var cell = $('div.DTE').parent();

                                if ( e.shiftKey ) {
                                    // Up to the previous row
                                    cell.parent().prev().children().last(0).click();
                                }
                                else if ( cell.next().length ) {
                                    // One cell to the right
                                    cell.next().click();
                                }
                                else {
                                    // Down to the next row
                                    cell.parent().next().children().eq(0).click();
                                }
                            }
                        } );
                    }
                } )
                .on( 'close', function () {
                    doc.off( 'keydown.editor' );
        } );

            // Activate an inline edit on click of a table cell
        $(divId).on( 'click', 'tbody td', function (e) {
            editor.inline( this , {
                submitOnBlur: true
            } );
        } );    

`

allan

jquery.dataTables.css

Remove that. It will conflict with the Bootstrap integration styles.

Have a look at this example, specifically the CSS tab below the example table. It shows the files that should be included.

All these files are a bit of a pain I realise, I'm working on a better solution!

Allan

rathinaganesh

Thanks Allan. That helped a lot and solved both the issues. Now, after removing the

jquery.dataTables.css

I am seeing a different issue. The create/edit/delete buttons and filter and colvis all in a different row. It is adding an extra space in the bottom footer as well.. (That is, Showing 10 to 20 entries and pagination are in different lines)

Also, looks like ColVis needs

jquery.dataTables.css and jquery.dataTables.js

I tried to add custom Toolbar as well like this

"dom": '<"toolbar">TClfrtip'

allan

ColVis shouldn't need jquery.dataTables.css - it has its own stylesheet.

However, if you are setting the dom option, you need to be aware that the Bootstrap configuration defines its own and you would be overwriting it by setting an option yourself, so you should modify the Bootstrap default.

Allan

rathinaganesh

Thanks Allan.