Reading values from search pane options

Khalid Teli · November 2020

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 · November 2020

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

Colin

Khalid Teli · November 2020

@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 · November 2020

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 · November 2020

@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 · November 2020

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 · November 2020

@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 · November 2020

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

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

Kevin

Khalid Teli · November 2020

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

kthorngren · November 2020

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 · November 2020

@kthorngren
Thank you. That worked

Reading values from search pane options

Reading values from search pane options

Answers

Howdy, Stranger!

Categories

DataTables

Reading values from search pane options

Reading values from search pane options

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables