DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

style difference between local and online

style difference between local and online

you2525you2525 Posts: 23Questions: 5Answers: 0
in Free community support

Hi,

I have a issue that followed me... I use datable to show data. I have different options with the table :
- several columns are visible by default and i can choose which columns I wanna see. (columnvisibility)
- css for the header, etc.

My issue is : i don't see the same result if i test my website on local or online.

Here is the result i wanna see : (local)

But here, is the table I see (online)

Difference :
- we don't see any colums, column visibility default doesn't work,
- the style (css) is not the same (compare the headers)
I can manually select the columns I wanna see, like this :

can someone help me please ?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,173Questions: 26Answers: 4,923

    we don't see any colums, column visibility default doesn't work,

    If things aren't working then start by looking at the browser's console for errors. In order for us to help we will need to see the problem. Please post a link to the page or a test case showing the issue.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • you2525you2525 Posts: 23Questions: 5Answers: 0
    edited December 2020

    There is no erro in the consol.
    It will take me all the day to try to reproduce the problem in a JS Bin unfortunelly. Lot of file calls. (cannot share the website it-self..)

    Here are the headers, maybe something is called in the wrong order ? :

    <!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" media="screen" type="text/css" title="design" href="assets/css/design.css" />       
        <link rel="stylesheet" href="assets/css/w3.css">
        <link rel="stylesheet" href="assets/font-awesome/css/cyrillic-text.css">
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.css">
        <link rel="stylesheet" href="assets/css/animate.css">
        <link rel="stylesheet" href="assets/css/style.css">
        <link rel="shortcut icon" href="assets/ico/favicon.png">

        <script src="assets/js/jquery-1.11.1.min.js"></script>
        <script src="assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/js/jquery.backstretch.min.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/waypoints.min.js"></script>
        <script src="assets/js/scripts.js"></script>

        <script type="text/javascript" language="javascript" src="assets/datatable/jquery.dataTables.min.js"></script>
    <style type="text/css">.dataTables_filter{float: right !important;}.dataTables_filter input { height: 38px } </style>  
    <script type="text/javascript" language="javascript" src="assets/js-custom/search_datatable.js"></script> 
    <link rel="stylesheet" href="assets/datatable/dataTables.bootstrap.min.css" />

    <script type="text/javascript" language="javascript" src="assets/datatable/dataTables.bootstrap.min.js"></script>
    <link rel="stylesheet" href="assets/datatable/dataTables.bootstrap.min.css" />
    <script type="text/javascript" language="javascript" src="assets/datatable/dataTables.buttons.min.js"></script>
    <link rel="stylesheet" href="assets/datatable/fixedColumnsdataTablesmin.css"/>
    <script src="assets/datatable/dataTablesfixedColumnsmin.js"></script>
    <script type="text/javascript" language="javascript" src="assets/datatable/buttons.colVis.min.js
    "></script>
    <script src="assets/datatable/fnSortNeutral.js"></script>
</head>

    Here is the list of file calls :

    don't know if it can help ...

    Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

  • kthorngrenkthorngren Posts: 21,173Questions: 26Answers: 4,923

    Looks like you are loading this twice:

    <link rel="stylesheet" href="assets/datatable/dataTables.bootstrap.min.css" />

    I might be missing it but I don't see where you are loading buttons.dataTables.min.css.

    You might want to use the Download Builder to make sure you have all the correct files.

    Kevin

  • you2525you2525 Posts: 23Questions: 5Answers: 0

    I take account your comment, tested it with buttons.dataTables.min.css, with differents files , it changes the style of the table but I have always the same issue : the default visibile option does not work. It acts like it doesn't care of the class 'target_visibility' (I put it for column I don't want to see) and it shoes all columns.

    Here is the def of the table

             var table_vertical = $('#example_vertical').DataTable(
         {      
            columnDefs: [
               { className: "dt-head-left", targets: '_all'},
               { targets: 'target_visibility', visible: false }
            ],

    Like that, NO column are shown.
    If i change visible to true like so : { targets: 'target_visibility', visible: true}, it displays ALL columns.
    (and it works fine on local...)

    Help please, I have no idea how to resolve this issue

  • kthorngrenkthorngren Posts: 21,173Questions: 26Answers: 4,923
    Answer ✓

    The columnDefs.targets support using a className, per the docs:

    A string - class name will be matched on the TH for the column (without a leading .)

    If i change visible to true like so : { targets: 'target_visibility', visible: true}, it displays ALL columns.

    My guess is you have the classname 'target_visibility assigned to the th elements in your header.

    Kevin

  • you2525you2525 Posts: 23Questions: 5Answers: 0

    oh i feel very stupid, now when i read my comment, it is obvious, thank you, it was my issue (and for the issu with blod text, i did a normalize.css)

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.