Answers

• travelerjjm Posts: 11Questions: 1Answers: 0

  July 2014

  Is ColVis what you want? http://www.datatables.net/extensions/colvis/
• robert909 Posts: 6Questions: 1Answers: 0

  July 2014 edited July 2014

  @travelerjjm Thank you for your response. I tried using this plugin and my requirement is sort of complicated in the sense that, the table should display columns as user selected and the user has option to choose in which order the columns has to display in the table. During the early phase of development, I used a simple javascript function to turn on / off the column visible option on the table, but later when the other features (such as give user option to sort and the table should auto apply columnfilter on each added column) added, the performance sucked (browser hangs all the time). So, I decided to have the server send data in the user selected columns & order, so that it will be a simple ajax load of data with col headings to minimize load on the browser. I have 34 columns ( I know it sounds strange but have to deal with this) and user can chose all or a couple from this list.

  I'm using the below plugins for my requirments and appreciate if you can shed any light on how effectively this can be done -

  dataTables.colReorder.js

  dataTables.tableTools.min.js

  jquery.dataTables.columnFilter.js

  Many thanks for your time and your comments here.
• robert909 Posts: 6Questions: 1Answers: 0

  July 2014

  Ok.. I made it to work this way. For some reason, I think there is another way using datatables inbuilt ajax function to do the same as am doing here..

  $.ajax( {
              //"dataType": 'json',
              "type": "GET",
              "url": "${pageContext.request.contextPath}/dashboard/ajax/loadprojects",
              "success": function (dataStr) {
  
                  oTable = $('#currentProjects-table')
                  .dataTable({
                      "aoColumns": dataStr.aoColumnDefs,
                      "data" : dataStr.data,
                              "aLengthMenu" : [
                                      [ 1, 5, 10, 25, 50, 100, -1 ],
                                      [ 1, 5, 10, 25, 50, 100, "All" ] ],
      "iDisplayLength" : 25,
      "bAutoWidth" : false,
      "sDom" : '<"row"<"col-xs-2"l><"col-xs-4 filter_templates"><"col-xs-2 save_filter_template"><"col-xs-2"f><"col-xs-1 hide_unhide_table_fitler"><"col-xs-1 saveas_div align-right"T>r>t<"row"<"col-xs-6"i><"col-xs-6"p>>',
                              "oTableTools" : {
                                  "aButtons" : [ {
                                      "sExtends" : 'csv',
                                      "sButtonText" : 'Export as CSV',
                                      "mColumns" : "visible"
                                  } ]
                              },
  
                              "bStateSave" : false,
                              "fnStateSave" : function(oSettings, oData) {
                                  localStorage.setItem('DataTables_'
                                          + window.location.pathname, JSON
                                          .stringify(oData));
                              },
                              "fnStateLoad" : function(oSettings) {
                                  return JSON
                                          .parse(localStorage
                                                  .getItem('DataTables_'
                                                          + window.location.pathname));
                              }
  
                              ,
                              "fnDrawCallback" : function(oSettings) {
  
                                  console.log('counter >>>>>>>>>>>>'+counter);
  
                                  counter ++;
  
                              }
                      });
              }
          } );
  

  Hope it helps somebody..!!