Wordpress issue with Datatables/JQuery

Question

I've tried for days and days with no luck on this. I have a wordpress site with an active theme and a working datatable. In the past, I've had to modify the typical datatable code a bit to get it to work right with scrolling and fixed search bar, etc.

The current problem is my column visibility button will not show up in any way, shape or form. If I copy the code to my test site, it works perfectly, so I know the code is technically right and the includes/css are right but I'm wondering if there's a different way to do this in a wordpress environment, maybe by appending the button or something.

The live site with the table (button not showing up) is testing.uwsinc.net/dashboardtest

Any help with this at all is much appreciated.

<head>
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css" />


<script type="text/javascript"   src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript"   src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"   src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript"   src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript"   src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.colVis.min.js"></script>
<script type="text/javascript"   src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script type="text/javascript"   src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script type="text/javascript"   src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>

   <style type="text/css">

    #select-tables{
    width: 250px; 

    }
    table,td,th{
        border:1px solid black;
    }
    table{
        border-collapse: collapse;
        width:100%;
    }
    td{
        border-collapse: collapse;
        /*border-right: none;
        border-left: none;*/
    }
    th{
        padding-left: 10px;
        padding-right:10px;
    }
    td{
        padding-left: 10px;
        padding-right:10px;
    }

    input[type=submit]{
        border: 1px solid grey;
        color:black;
        font-size:12px; 

    }

    table.dataTable tbody th,
    table.dataTable tbody td {
    white-space: nowrap;
    }

    .dataTables_scroll
    {
       overflow:auto;
       width: 965px;
    }

    .datatable{
        width: 100% !important;
    }

    a.dt-button{
    color:red;
    }
    </style>
</head>
<body>

//this section creates a drop down to show/hide one of the 2 tables
<label style="font-weight:bold;">Select the table you would like to view:</label></br>
<select name='tables' id='select-tables'>
<option value="mytable">Survey Test Table</option>
<option value="mytableSurvey">Survey Only</option>
</select>
</br>


//this code starts the datatables
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('#mytable').DataTable({
dom: 'Blfrtip',
buttons: [
    'colvis'
] 
});



$('#mytableSurvey').DataTable({
dom: 'Blfrtip',
buttons: [
    'colvis'
]
});
$('.dataTable').wrap('<div class="dataTables_scroll" />');


$(document).on('change' , '#select-tables', function(){
var table = $(this).val();
$('#' + table +'_wrapper').show();
$('[id$="_wrapper"]').not('#' + table +'_wrapper').hide();
});
$("#select-tables").trigger("change");

});
}(jQuery));
</script>

UPDATE:

New method to hide dynamically, also not working:

<script type="text/javascript">
(function($) {
$(document).ready(function() {

var table = $('#mytable').DataTable({

});

$('a.toggle-vis').on( 'click', function (e) {
    e.preventDefault();

    // Get the column API object
    var column = table.column( $(this).attr('data-column') );

    // Toggle the visibility
    column.visible( ! column.visible() );
} );


$('.dataTable').wrap('<div class="dataTables_scroll" />');



$(document).on('change' , '#select-tables', function(){
var table = $(this).val();
$('#' + table +'_wrapper').show();
$('[id$="_wrapper"]').not('#' + table +'_wrapper').hide();
});
$("#select-tables").trigger("change");

});
}(jQuery));
</script>

Do check my answer, and don't forget to upvote or accept answers that have helped you :) — Malcolm Salvador
– Malcolm Salvador, Commented Jun 8, 2017 at 23:47

Malcolm Salvador · Accepted Answer · 2017-06-09 01:19:16Z

2

Your wordpress site might be using a much more up to date version of jQuery Datatables.

As per here, colvis is no longer used.

You should instead create your own button that will fit your needs

Modify this part:

buttons: [
    'colvis'
]

To

 dom: 'Bfrtip',
 buttons: ['csv',
                [
                       {
                           text: 'Hide Column',
                           className: 'classNameSoYouCanApplyMoreJSCode', 
                           action: function (e, dt, node, config) {

                               //code to hide the column.

                           }
                       }
                ]
            ]

To illustrate, default buttons (like the csv) can be declared like so, and custom buttons can be declared after the default buttons, formatted like above.

EDIT:

Now, there is likely good reason as to why they removed the colvisbutton tag, but if your datatables work in a previous project with it.. then please go on ahead.

edited Jun 9, 2017 at 1:19

answered Jun 8, 2017 at 23:46

Malcolm Salvador

1,5663 gold badges22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Geoff_S Over a year ago

I apologize, I just got back online. I'm only just started doing this with JS recently, do you think you could help me a bit with how I would get the button to do what I need it to do?

Geoff_S Over a year ago

Also, the issue seems to regard buttons in general because if I add the csv button it also doesn't show up

Malcolm Salvador Over a year ago

Understood, let me see what I can do. I'll edit my answer later after I'm done with work (ETA 4 hrs from now), but you can also check [here][1] as well :) [1]:datatables.net/examples/api/show_hide.html

Malcolm Salvador Over a year ago

@TomN. Can you check which version of datatables the site is using? Have you included jQuery datatables buttons JS File? If both are ok, there might be other js files that interfere with the datatable.. can you pinpoint them out by removing them one by one and resting if the tables finally reveal the buttons?

Geoff_S Over a year ago

Thank you for your update above as well! As you can see in my code, the buttons js file is indeed included, as are the others required from the column visibility page on datatables.net. I'm not able to see any other JS conflict, but again this is a new world for me. Do you think I should try older versions of the files in my includes?

|

Collectives™ on Stack Overflow

Wordpress issue with Datatables/JQuery

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related