datatables won't hide column

baseball43v3r

I feel like my error might be very noticable but I can't seem to find it. My table shows up fine, but the 3 product number columns won't hide. The rest of the syntax in the script seems to parse correctly, so what am I missing? I've included what I think are the relevant parts but I included the file at the bottom.

            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                             <div class="row">
                                <div class="col-md-10">Current Product Numbers</div>
                                <div id="addProduct" class="col-md-2"><button type="button" id="createProductButton" class="btn btn-primary navbar-btn test-right" data-toggle="modal" data-target="#addProductModal">Add Product</button></div>
                            </div>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="dataTable_wrapper">
                            <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
                                 <thead>
                                        <tr>
                                            <th></th>
                                            <th>ProductID</th>
                                            <th>Product Category</th>
                                            <th>Product Number1</th>
                                            <th>Product Number2</th>
                                            <th>Product Number</th>
                                            <th>Name</th>
                                            <th>Price</th>
                                            <th>Description</th>

                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <th></th>
                                            <th>ProductID</th>
                                            <th>Product Category</th>
                                            <th>Product Number1</th>
                                            <th>Product Number2</th>
                                            <th>Product Number</th>
                                            <th>Name</th>
                                            <th>Price</th>
                                            <th>Description</th>

                                        </tr>
                                    </tfoot>
                            </table>
                            </div>
                            <!-- /.table-responsive -->


        <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
    $(document).ready(function() {
        $('#dataTables-example').DataTable({
             "responsive": true,
             "processing": true,
                //"scrollY":        "800px",
                //"scrollCollapse": true,
                //"paging":         false,
                "ajax": "../dist/scripts/getProducts.php",
                "columns": [
                {
                    "class":          "details-control",
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": ""
                },
                {   "data": "ProductID",
                    "visible": false
                },  {
                    data: "Product_Category",
                    visible: false
                }, {
                    data: "Product_Number1",
                    visible: false
                }, {
                    data: "Product_Number2",
                    visible: false
                }, {
                    data: null,
                    render: function(data, type, row) {
                        return row.Product_Category + "." + row.Product_Number1 + "." + row.Product_Number2;
                    },
                    width: "5%"
                }, {
                    "data": "Name",
                    width: "40%"
                }, {
                    "data": "Price",
                    render: $.fn.dataTable.render.number(',', '.', 2, '$'),
                    width: "5%"
                }, {
                    "data": "Desc_Short",
                    width: "50%"
                }],
                columnDefs: [{
                    targets: [3],
                    orderData: [0, 1, 2]
                }]
        });
         $(function(){
                $('#showProductInfo').modal({
                    keyboard: true,
                    backdrop: "static",
                    show:false,

                }).on('shown.bs.modal', function(){ //subscribe to show method  
         });
            });
            //clickable details opens a modal
            $('#dt tbody').on( 'click', 'tr td.details-control', function () {
                $("#showProductInfo").modal("show")
                console.log("show product info clicked");
                //var getIdFromRow = $(event.target).closest('td').data('Name'); //get the id from tr
                var tr = $(this).closest('tr');
                var row = table.row(tr);
                var d = row.data();
                $("#showProductInfo").attr("data-id", d.Name);
                $("#productName").html(d.Name);
                $("#orderDetails").html(d.ProductID);
                console.log("row data " + d.Name );
                //make your ajax call populate items or what even you need
                //$(this).find('#orderDetails').html($('<b> Order Id selected: ' + d.Name  + '</b>'))
            });
    });
    </script> 

bindrid

            "class":          "details-control",
                "orderable":      false,
                "data":           null,
                "defaultContent": ""

remove data:null, null can end up being displayed as [object, Object]

remove the class from this  

<

div class="dataTable_wrapper">
Datatables creates its own and the dependent jquery might be grabbing the wrong object.

but none of these should actually break the code.
Do you have console up and running? Any errors there?

allan

What version of Responsive are you using? Prior to v2 it could overrule your column visibility settings.

Also, with apologies to @bindrid - columns.data being set to null is actually valid. He is perfectly correct to say that it can show up as [object, Object] at times, as that setting means that the data object for the whole row should be used (thus this is useful when using columns.render). You have used columns.defaultContent so you don't need to worry about that - remove that line and you'd see the effect bindrid mentioned.

Allan

baseball43v3r

@bindrid, I was using null to make a control column, but Allan provided the correct solution, I ran the debugger and saw that my version was 1.0.6 (yikes!) and upgrading to the current version solved the issue I was seeing. Thank you!

allan

Good to hear that resolved it. v1 of Responsive used DataTables own column visibility methods to show / hide columns - thus it would override whatever you set. v2 resolved that by using its own mechanism for hiding columns.

Allan