Adding the searchpane button removes ability to select what panes show.

davidjmorin

I was using the searchpanes before in the top of my table. I loved how they worked and did what I needed. I had it only show 3 panes for columns 0,5,8. Then I saw the showpane button and loved that idea. Issue is now it is not recognizing that I only want to show the 3 panes and instead shows all of them. I followed the guide for the searchpane button.

$(document).ready(function() {
    $('#example').DataTable( {
        buttons:[
            'searchPanes'
        ],
        dom: 'Bfrtip',
    });
});

Here is my script

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

        ajax: 'php/table.rma_submissions.php',
        columns: [
            {
                "data": "rma_submissions.location"
            },

            {
                "data": "rma_submissions.rma_number"
            },
            {
                "data": "rma_submissions.paid"
            },
            {
                "data": "rma_submissions.paid_date"
            },

            {
                "data": "rma_submissions.timestamp"
            },

            {
                "data": "rma_submissions.email"
            },
            {
                "data": "rma_submissions.original_sales_date"
            },
            {
                "data": "rma_submissions.man_sku"
            },
            {
                "data": "rma_submissions.device_id"
            },
            {
                "data": "rma_submissions.vendor"
            },
            {
                "data": "rma_submissions.device_man"
            },

                        {
                            "data": "rma_reasons.reason_description"
                        },

            {
                "data": "rma_submissions.orig_invoice"
            },
            {
                "data": "rma_submissions.all_accessories"
            },
            {
                "data": "rma_submissions.new_submission"
            },

            {
                "data": "rma_submissions.defective_oob"
            },

            {
                "data": "rma_submissions.district",
                "name": "district"
            }
        ],
        select: true,

        "columnDefs": [
             {
    "targets": 5,
    "data": null,
    "render": function ( data, type, full, meta, row ) {
      return '<a href="mailto:'+data+'?subject=RMA for device - '+full.rma_submissions.device_id+'&body=Your Submission Date: '+full.rma_submissions.timestamp+'%0D%0AYour Device ID:'+full.rma_submissions.device_id+'%0D%0ADevice SKU:'+full.rma_submissions.man_sku+'  " target="_blank">'+data+'</a>';
    }
  } ],
        dom: 'Bfrtip',
        "scrollX":        "1200px",
        lengthChange: false,
        scrollX: true,
        deferRender:    true,
    scroller:       true,
        order: [[4,'desc']],
        language: {
            searchPanes: {
                clearMessage: 'Obliterate Selections',
                collapse: {0: 'Search Options', _: 'Search Options (%d)'}
            }
        },

        buttons:[
                  'searchPanes',
                        { extend: "edit", text: "Update",  editor: editor },
                        { extend: "remove", text: "Delete",  editor: editor },
                        { extend: 'csvHtml5',
            footer: true,
            text:   'Export',
            filename: function(){
                       var d = new Date();
                       month = '' + (d.getMonth() + 1),
                       day = '' + d.getDate(),
                       year = d.getFullYear();
                       var n = d.getTime();
                       var now = new Date();
                       var months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
                       var formattedDate = now.getFullYear() + months[now.getMonth()] + now.getDate();
                       return formattedDate + 'RMA Submissions'}

           },
        ],

    } );





    new $.fn.dataTable.Buttons( table, [
        { extend: "edit", text: "Update",  editor: editor },
        { extend: "remove", editor: editor },
        { extend: "csv", text: "Download", editor: editor, filename:"Submitted RMAs"}
    ] );

    table.buttons().container()
        .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );
} );



}(jQuery));

http://live.datatables.net/pokakemu/1/edit

colin

Hi @davidjmorin ,

In your test case you aren't defining what columns to show or hide, take a look at this example.
If you are still having issues then please either edit that example or provide one that show the problem that you are having.

Thanks,

Sandy (posting for him!)

davidjmorin

This is my script. Still not working

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

        ajax: 'php/table.rma_submissions.php',
        columns: [
            {
                "data": "rma_submissions.location"
            },

            {
                "data": "rma_submissions.rma_number"
            },
            {
                "data": "rma_submissions.paid"
            },
            {
                "data": "rma_submissions.paid_date"
            },

            {
                "data": "rma_submissions.timestamp"
            },

            {
                "data": "rma_submissions.email"
            },
            {
                "data": "rma_submissions.original_sales_date"
            },
            {
                "data": "rma_submissions.man_sku"
            },
            {
                "data": "rma_submissions.device_id"
            },
            {
                "data": "rma_submissions.vendor"
            },
            {
                "data": "rma_submissions.device_man"
            },

                        {
                            "data": "rma_reasons.reason_description"
                        },

            {
                "data": "rma_submissions.orig_invoice"
            },
            {
                "data": "rma_submissions.all_accessories"
            },
            {
                "data": "rma_submissions.new_submission"
            },

            {
                "data": "rma_submissions.defective_oob"
            },

            {
                "data": "rma_submissions.district",
                "name": "district"
            }
        ],
        select: true,

        "columnDefs": [
             {
    "targets": 5,
    "data": null,
    "render": function ( data, type, full, meta, row ) {
      return '<a href="mailto:'+data+'?subject=RMA for device - '+full.rma_submissions.device_id+'&body=Your Submission Date: '+full.rma_submissions.timestamp+'%0D%0AYour Device ID:'+full.rma_submissions.device_id+'%0D%0ADevice SKU:'+full.rma_submissions.man_sku+'  " target="_blank">'+data+'</a>';
    }
  },
    {
              searchPanes: {
                show: true
              },
              targets: [0,1,2]
            },
            {
              searchPanes: {
                show: false
              },
              targets: [3,4,5,6,7,8,9,10,11,12,13,14,15]
            } ],
        dom: 'BfPrtip',
        "scrollX":        "1200px",
        lengthChange: false,
        scrollX: true,
        deferRender:    true,
    scroller:       true,
        order: [[4,'desc']],
        searchPanes:{
                  controls: false,
            columns:[2,10,9],
                        cascadePanes: true

        },
        buttons:[
                        { extend: "edit", text: "Update",  editor: editor },
                        { extend: "remove", text: "Delete",  editor: editor },
                        { extend: 'csvHtml5',
            footer: true,
            text:   'Export',
            filename: function(){
                       var d = new Date();
                       month = '' + (d.getMonth() + 1),
                       day = '' + d.getDate(),
                       year = d.getFullYear();
                       var n = d.getTime();
                       var now = new Date();
                       var months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
                       var formattedDate = now.getFullYear() + months[now.getMonth()] + now.getDate();
                       return formattedDate + 'RMA Submissions'}

           },
        ],

    } );



    $('#rma_submissions').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
} );

    new $.fn.dataTable.Buttons( table, [
        { extend: "edit", text: "Update",  editor: editor },
        { extend: "remove", editor: editor },
        { extend: "csv", text: "Download", editor: editor, filename:"Submitted RMAs"}
    ] );

    table.buttons().container()
        .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );
} );



}(jQuery));

sandy

Hi @davidjmorin ,

Sorry, you will have to replicate the issue with a working test case that clearly shows any issues that you are having.

This will mean either linking to the page that you are working on, or replicating the issue using http://live.datatables.net/ as I have done above. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Thanks,
Sandy