Searchpane issue, showing below table

davidjmorin

Using a searchpane and it is showing below the table. How can I have it so that it pops under the button like in the examples?

<script type="text/javascript" class="init">
$(document).ready(function() {
  $('#PPchangeAct').DataTable( {
    "order": [[ 8, "desc" ],[ 0, "asc" ]],
      dom: 'Bfrtip',
      responsive: true,
      language: {
        searchPanes: {
               clearMessage: 'Clear All',
               collapse: 'Filter',
               cascadePanes: true,
               viewTotal: true,
               layout: 'columns-2',
           },
      search: "_INPUT_",
      searchPlaceholder: "Search Records"
          },
      columnDefs: [ {
        targets: [0,1,2,3,4,5,6,7,8,9],
        createdCell: function (td, cellData, rowData, row, col) {
            if ( rowData[9] === 'Yes' ) {
                $(td).css('background-color', '#3CB371');
                $(td).css('color', 'white');
            }else{$(td).css('background-color', '#DCDCDC'); }
        },

        searchPanes:{
          show: true,
        },

        targets:[2],

      },


      {
          searchPanes: {
              show: false,
          },
          targets: [1,3,5,6,7,8,9],

    } ],
      buttons: [
        {
            extend: "searchPanes",
            text: "Filter",
        },
          { extend: 'csvHtml5',
          footer: true,
          text:   'Export Data',
          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 'Price Plan Activations - ' + formattedDate}

         },
      ]
  } );
} );


</script>

davidjmorin

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

For whatever reason I can never get the live editor to show any buttons. So here is my example without anyting on it.

kthorngren

You are getting a couple errors in the browser's console, notably this:

Uncaught ReferenceError: jQuery is not defined

You don't have the include file in the correct order. I moved the libraries you added down and also added the select library.

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

I think the example is working like this example. Sounds like you might have a CSS issue. Make sure you are loading all the same files in the test case as on your problem page.

Maybe an easy solution is to use the Download Builder to get the proper files for your environment.

Kevin