Reading values from search pane options

Khalid Teli

Hi ,
I am writing a function to change the table headers based on the drop down list in global filter.
For example, if the value USAis chosen in drop down menu the six headings will be 'A', 'B', 'C', 'D', ' ', ' '
and if the value UK is chosen in drop down menu the six headings will be> 'E' , 'F', 'G', 'H', 'I,', 'J '

function headerChange() {
  var target = $('#global_filter option:selected').val();
  if(target == "USA"){

 $( table.column(0).header() ).html('A');
  $( table.column(1).header() ).html('B');
  $( table.column(2).header() ).html('C');
  $( table.column(3).header() ).html(D'');
  $( table.column(4).header() ).html('');
  $( table.column(5).header() ).html('');

  }
  else if(target == "UK"){
  $( table.column(0).header() ).html('E');
  $( table.column(1).header() ).html('F');
  $( table.column(2).header() ).html('G');
  $( table.column(3).header() ).html('H');
  $( table.column(4).header() ).html('I');
  $( table.column(5).header() ).html('J');


  }
}

Then I call this inside global filter

$('#global_filter').on( 'keyup click', function () {
            filterGlobal();
            headerChange();

              });

I want something similar , like this var target = $('#global_filter option:selected').val(); to select values from searchPane and the use the same logic to chnage table headers.

Also, can I hide the columns based on the logic, if table header is empty.
for example, if I choosetarget = "USA" , table header names for $( table.column(4) and $( table.column(5) are empty.

Can I use some logic to hide these last two columns based on the logic, if these are empty?

colin

Yep, you can hide columns programmatically with column().visible() and columns().visible(),

Colin

Khalid Teli

@colin
I manged to hide the columns with empty header using

"fnDrawCallback": function () {

                              table.columns().every( function () {

                             var idx = table.columns( this ).column;

                            var title = table.columns( idx ).header();
                             console.log($(title).html());

                        if ($(title).html() == "Product Code") {

                             table.column( idx ).visible(false);

                        }

                         else  {

                            table.column( idx ).visible( true );

                         }
                     });
              },

However, it only reading first column headers . How can I loop through all columns?

With regards to

I want something similar , like this var target = $('#global_filter option:selected').val(); to select values from searchPane and the use the same logic to chnage table headers.

How can I access values from SearchPane?

sandy

Hi @Khalid Teli ,

How can I access values from SearchPane?

Take a look at this post discussing a similar issue, it should answer your question.

Thanks,
Sandy

Khalid Teli

@sandy
Thank you.
Thanks is what I was looking for.

Rather than using $('#selections').on('click', function(){ i used $('.dtsp-nameColumn') but it wont give dispay anything on click? I dont know why

 $('.dtsp-nameColumn').on('click', function(){

    var xyz = $('div.dtsp-searchPane table').DataTable().rows({selected: true}).data().toArray();

        var abc = xyz[0].display;
                console.log(abc);

  });

I changed it on thsi example http://live.datatables.net/runawara/1/edit it works on double click but in my own code it doesnt

sandy

Hi @Khalid Teli ,

That is because the click event is running before SearchPanes has changed the selections. Take a look at this example that listens for the select.

Thanks,
Sandy

Khalid Teli

@sandy
Thank you, the example you provided is perfect, It is exactly doing what I want. However, when I use the same in my code it doesn't work.

  var table = $('#contracts').DataTable( {
        "processing": true,
        "serverSide": true,
         "paging":   true,
          "scrollX":true,
          "scrollCollapse": true,

      "ordering": [],
      "stateSave": false,
        "info":   true,
    "dom": 'PBfrtip',
    "ajax":

     {
      url:"/xxx/xxx.php",
            type:'POST'

    },


                   "drawCallback": function () {
                                        var api = this.api();



                            table.columns().every( function () {
                            var columnHeader = api.columns().header();
                              var columnHeader = $(this.header()).text();

                             if (columnHeader == "") {


                                this.visible(false);
                            }

                             else  {

                               this.visible( true );

                             }
                        });
                  },


searchPanes:{

           "cascadePanes": true,
             "layout": 'columns-4'
       },

    "columns": [
      { data: "product_code" },
      { data: "product_name" },
      { data: "pack_size" },
.......
......


      ],  "columnDefs": [ 
         {

       searchPanes:{

          "show": true,

        },
        targets: [3,4]

    }
  ],

    select: {
            style:    'os',
            selector: 'td:first-child'
        },
    buttons: [
     {

        text: 'Advanced Filters',


        className: 'spToggle showPanes',
        action: function (e, dt, node, config) {
          dt.searchPanes.container().find('.dtsp-searchPanes').slideToggle(200, function () {
           // table.searchPanes.container().show();

            $('.spToggle').toggleClass('showPanes', $(this).is(':visible'));

          });
        },
      },
      { extend: "create", editor: editor },
      { extend: "edit",   editor: editor },
      { extend: "remove", editor: editor }
    ]

  } );




 $('div.dtsp-searchPanes table').on('select', function(){

   var xyz = $('div.dtsp-searchPane table').DataTable().rows({selected: true}).data().toArray();
        var abc = xyz[0].display;
       console.log(abc);

 });

When using the bvutton click event, it works fine

          $('#selections').on('click', function(){

       var xyz = $('div.dtsp-searchPane table').DataTable().rows({selected: true}).data().toArray();
            var abc = xyz[0].display;
           console.log(abc);

     });

kthorngren

Try changing your select event to use select.dt, for example:

$('div.dtsp-searchPanes table').on('select.dt', function(){
....

Kevin

Khalid Teli

@kthorngren
Thank you! I tried using this but still not working

kthorngren

Since you are using ajax you might need to move the code into initComplete so its not executed until after Datatables initializes.

Kevin

Khalid Teli

@kthorngren
Thank you. That worked