Column Visibility Not Working

Column Visibility Not Working

yaddlyyaddly Posts: 5Questions: 3Answers: 0

Good day, I'm in desperate need of help to resolve the error below. I'm using a dataTable plugin in Asp.Net MVC application and I'm getting an error when I try to hide some columns from the table.

Here is my initialisation code:

    var jnoCon = jQuery.noConflict();


    jnoCon(document).ready(function () {

        jnoCon('#assetTable').DataTable(
            {
                responsive: true,
                colReorder: true,
                dom: 'Bfrtip',
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5',
                    'print',
                    'colvis'
                ]
            });
    });

BundleConfig file code: All javascripts are here

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/DataTables/jquery.dataTables.min.js",
"~/Scripts/DataTables/dataTables.bootstrap.min.js",
"~/Scripts/DataTables/dataTables.responsive.min.js",
"~/Scripts/DataTables/dataTables.colReorder.min.js",
"~/Scripts/DataTables/dataTables.buttons.min.js",
"~/Scripts/DataTables/buttons.colVis.min.js",
"~/Scripts/DataTables/jszip.min.js",
"~/Scripts/DataTables/pdfmake.min.js",
"~/Scripts/DataTables/vfs_fonts.js",
"~/Scripts/DataTables/buttons.html5.min.js",
"~/Scripts/DataTables/buttons.print.min.js",
"~/Scripts/jquery.mask.min.js",
"~/Scripts/bootstrap-toggle.min.js",
"~/Scripts/foundation-datepicker.min.js"));

All CSS files are here:

bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/font-awesome.min.css",
"~/Content/sidebar.css",
"~/Content/bootstrap-toggle.min.css",
"~/Content/foundation-datepicker.min.css",
"~/Content/DataTables/css/dataTables.bootstrap.min.css",
"~/Content/DataTables/css/jquery.dataTables.min.css",
"~/Content/DataTables/css/responsive.dataTables.min.css",
"~/Content/DataTables/css/buttons.dataTables.min.css",
"~/Content/DataTables/css/colReorder.dataTables.min.css",
"~/Content/dataTables.colVis.min.css"
));

Error: Uncaught TypeError: d(...).parents(...).andSelf is not a function

Error Source: dataTables.buttons.min.js:24

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,818Questions: 1Answers: 10,517 Site admin
    Answer ✓

    What version of Buttons are you using? There was a jQuery 3 compatibility issue, but that was fixed in the 1.2.2 release of Buttons, which is the current release.

    Allan

  • yaddlyyaddly Posts: 5Questions: 3Answers: 0

    Good day Mr Allan, I'm sorry to respond this late but thank you very much for pointing out something I could not have ever picked up. I was using Buttons for DataTables 1.2.0 and now it is working after changing to 1.2.2.

    Kindly afford me the opportunity to share with you that if you minify the current release you still get an error that I initially complained about but the non-minified javascript works well. Thank you once again for coming to my rescue.

This discussion has been closed.