Answers

• allan Posts: 63,552Questions: 1Answers: 10,477 Site admin

  September 2017

  jQuery 1.10.x should work fine. In fact anything later than 1.7 should work okay.

  Allan
• pm5249 Posts: 28Questions: 8Answers: 0

  September 2017

  Thanks Allan,

  But you have mentioned that it needs DataTable js version 10.12.16 and I am using 10.12.10 for 2nd version it is not working.

  PM
• allan Posts: 63,552Questions: 1Answers: 10,477 Site admin

  September 2017

  it needs DataTable js version 10.12.16

  There is no 10.12.16 version of either jQuery of DataTables.

  The current release of DataTables (1.10.16) will work with any version of jQuery from v1.7 or newer. This information is available on the compatibility page.

  Allan
• pm5249 Posts: 28Questions: 8Answers: 0

  September 2017

  Its ok Allan. There might be typo mistake from me, but it still not working.

  this is what my dataTable code is.

  myDatatableProduct=$('#productConfigurationList').DataTable( {
  "sDom": '<lf<"#gobutton"><"#actions"><t>ip<"clear"<".productConfigurationactions">>>',
  orderCellsTop: false,
  "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
  scrollY:"300px",
  scrollX: false,
  scrollCollapse: true,
  paging: false,
  fixedColumns: {
  leftColumns: 2
  },
  "columnDefs": [
  { "width": "20%", "targets": 0 }
  ],

      aoColumnDefs: [
          { 'bSortable': false, 'aTargets': ['no-sort'] }//,{'bVisible': false, 'aTargets': targetArray}
      ],
      initComplete: function () {
      $select = $('<select/>').appendTo('#actions');
          $select.attr('id', 'selectactions');
          $select.addClass("myselectstyleforactions combobox");
          $('<option/>').val('').text('Actions').appendTo($select);
          $('<option/>').val('showhidecols').text('Show / Hide Columns').appendTo($select);
  
          $("#gobutton").html("<button class='form-control btn populate_submit_save_btn' onclick='performAction()'>Go</button>");
          var createCloneProductButton = '<div class="row"><div class="col-lg-12 col-fhd-12 "><button id="createProductbtn" class="form-control btn common_button">CREATE PRODUCT</button><button id="cloneProductbtn" class="form-control btn common_button">CLONE PRODUCT</button></div></div>';
          $(".productConfigurationactions").html(createCloneProductButton);
          var that = this;
          var columns = this.api().columns().data();
  
  
                   console.log($.inArray("Yes",that.api().column('16').data()));
              if($.inArray("Yes",that.api().column('16').data()) >= 0)    { 
  
              that.api().column('16')
                              .search('Yes')
                              .draw();
                              }
                              else{
                              var val = $.fn.dataTable.util.escapeRegex(
                              $(this).val() != "All" ? $(this).val() : ""
                              );
                          that.api().column(16)
                              .search( val ? 'All' : '', true, false )
                              .draw();
                              }
          $('#productConfigurationList thead tr#filterrow th').each( function (index) {
          var select = $('<select class="myselectstyle combobox" onclick="stopPropagation(event)"><option value="">Select</option></select>')
                                      .on( 'change', function () {
                          var val = $.fn.dataTable.util.escapeRegex(
                              $(this).val() != "All" ? $(this).val() : ""
                          );
  
                          that.api().column(index)
                              .search( val ? '^'+val+'$' : '', true, false )
                              .draw();
                      } );
  
                  columns[index].forEach( function ( d, j ) {
  

  //alert(d);
  if (!select.find('option[value="' + d + '"]').length) {
  select.append( '<option value="'+d+'">'+d+'</option>' );
  }
  if(index == 16)
  {
  if (!select.find('option[value="All"]').length) {
  select.append( '<option value="All">All</option>' );
  }
  }

          });
                if($.inArray(index, targetArray) !== -1 ){
              var column = that.api().column(index);
              var isVisible = column.visible();
              that.api().settings()[0].aoColumns[index].bSearchable = false;
              column.visible(false);
              that.api().rows().invalidate().draw(false);
          }
  
          var columnLabel = $($('#productConfigurationList thead tr:last-child th').get(index)).html();
          select.attr('id', columnLabel);
              select.appendTo(this);
  
          });
  
  
          $('#productConfigurationList tbody').on('click', 'td:nth-child(1)', function () {
              alert('click');
          });
          $('.dataTable').wrap('<div class="dataTables_scroll" />');
          var scrollWidth = $("#productConfigurationList tbody").width();
          $(".dataTables_scroll").css({"max-width": scrollWidth+"px"});
          $( " input[type='search']" ).css( "font-family","Roboto FontAwesome " );
  
          $('.combobox').combobox();
  
      }
      ,
      "fnDrawCAllback": function( oSettings ) {
          $(".dataTables_wrapper .dataTables_paginate .paginate_button").css({"color":"red !important"});
       }
  } );
  

  });

  Its yet now working.
• pm5249 Posts: 28Questions: 8Answers: 0

  September 2017

  it shows horizontal scroll bar for thead and vertical and horizontal scroll bar for tbody but columns are not fixed.
• allan Posts: 63,552Questions: 1Answers: 10,477 Site admin

  September 2017

  Happy to take a look at a test case showing the issue.

  Allan
• pm5249 Posts: 28Questions: 8Answers: 0

  September 2017

  You want code for it? or you want to see what causes this issue?
• pm5249 Posts: 28Questions: 8Answers: 0

  September 2017

  hey allen,

  See this is my HTML Code

  <

  table id="pricingTable" class=" table table-striped table-hover display" cellspacing="0" width="100%">
  <thead>
  <tr id="filterrow">
  <th></th>
  <th></th>
  <th data-hide="true" class="smallWidth"></th>
  <th class="smallWidth"></th>
  <th class="smallWidth"></th>
  <th></th>
  <th class="smallWidth"></th>
  <th class="smallWidth"></th>
  <th></th>
  <th class="smallWidth"></th>
  <th class="smallWidth"></th>
  <th></th>
  <th class="smallWidth"></th>
  <th class="smallWidth"></th>
  <th></th>
  <th class="smallWidth"></th>
  <th class="smallWidth"></th>
  <th></th>
  </tr>
  <tr>
  <th>Description</th>
  <th>Type</th>
  <th data-hide="true" class="smallWidth">Algorithm</th>
  <th class="smallWidth">GRP</th>
  <th class="smallWidth">US</th>
  <th>Canada CAD</th>
  <th class="smallWidth">LA</th>
  <th class="smallWidth">US</th>
  <th>Canada CAD</th>
  <th class="smallWidth">LA</th>
  <th class="smallWidth">US</th>
  <th>CAD</th>
  <th class="smallWidth">LA</th>
  <th class="smallWidth">US</th>
  <th>CAD</th>
  <th class="smallWidth">LA</th>
  <th class="smallWidth">US</th>
  <th>Canada CAD</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>Sample1</td>
  <td>Sample2</td>
  <td data-hide="true">sample3</td>
  <td class="pop popException" >4000</td>
  <td>1680</td>
  <td>1680</td>
  <td>1680</td>
  <td>1680</td>
  <td>1680</td>
  <td>1680</td>
  <td>1680</td>
  <td>1680</td>
  <td>1680</td>
  <td>1680</td>
  <td>1680</td>
  <td>1680</td>
  <td>1680</td>
  <td>1680</td>
  </tr>
  </tbody>
  </html>

  This is the js code

  *** Pricing Table Creation ***/
  var priceTable = $("#pricingTable").DataTable({
  "sDom": '<lf<"#priceGobutton.actions"><"#priceActions.actions"><t>ip<"clear"<"#savebutton">>>',
  orderCellsTop: false,
  fixedHeader: true,
  fixedColumns: {
  leftColumns: 2
  },
  scrollX: true,
  "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
  initComplete: function () {
  $("div.toolbar11").html('<b>Custom tool bar! Text/images etc.</b>');
  $select = $('<select/>').appendTo('#priceActions');
  $select.attr('id', 'selectactions');
  $select.addClass("myselectstyleforactions combobox");
  $('<option/>').val('').text('Actions').appendTo($select);
  $('<option/>').val('showhidecols').text('Show/Hide Columns').appendTo($select);
  //$("#priceGobutton").html("<button class='form-control btn populate_submit_save_btn' onclick='performAction()'>Go</button>");
  var goButton = $("<button>").addClass("form-control btn populate_submit_save_btn").attr("type", "button").html("Go");
  $("#priceGobutton").html(goButton);

          $('#priceActions').combobox();
          var that = this;
          var columns = this.api().columns().data();
          var tableHeaderTh = $("#pricing thead #filterrow th");
          setTimeout(multifilterColumns(tableHeaderTh, that, columns), 5000);
  
          goButton.on("click", function (e) {
              var action = $("#priceActions").parent().find(".combobox-container input[type=hidden]").val();
              //performAction(action, that.api(), e, priceTable);
                   performAction(action, that.api(), e, priceTable, $('#pricingTable'));
          });
          $('.dataTable').wrap('<div class="dataTables_scroll" />');
          var scrollWidth = $("#table-priceregion tbody").width();
          $(".dataTables_scroll").css({ "max-width": scrollWidth + "px" });
          //Hide the columns which should not shown bydefault.
          var hiddenColumns = $("#pricing thead th[data-hide=true],#pricing tbody td[data-hide=true]");
          $(hiddenColumns).addClass("hideClass");
          console.log(columns);
      },
      createdRow: function (row, data, index) {
          $(row).find("td.pop").on("click", function (e) {
              e.stopPropagation();
              var pos = $(this).offset();
              $(".customPopup").removeClass("hideClass");
  
              var width = $(".customPopup").outerWidth();
              var height = $(".customPopup").outerHeight();
              exceptionValuePopup($(this), pos, width, height);
          })
      }
  });
  

  priceTable.on( 'draw', function () {
  //Hide the columns which should not shown bydefault.
  var hiddenColumns = $("#pricingTable thead th[data-hide=true],#pricingTable tbody td[data-hide=true]");
  $(hiddenColumns).addClass("hideClass");
  });

  These are the js files I have called on html page including jquery
  
  

  This is what I am getting error.

  Capture.JPG 84.1K
• pm5249 Posts: 28Questions: 8Answers: 0

  September 2017

  One more thing I am facing one issue because of one function if I removed that function then I am getting error :
  jquery.dataTables.min.js:59 Uncaught TypeError: Cannot read property 'style' of undefined
• allan Posts: 63,552Questions: 1Answers: 10,477 Site admin

  September 2017

  Please see this tech note for information on how to provide a test case.

  Allan
• pm5249 Posts: 28Questions: 8Answers: 0

  September 2017

  Hey Allen
  Thanks I just checked with jsfiddle over there it is working well but when I use it at my end it is not working.
• tangerine Posts: 3,365Questions: 39Answers: 395

  September 2017

  Please provide a link to your test case.
• pm5249 Posts: 28Questions: 8Answers: 0

  September 2017

  hi Allen,

  It worked for me but only one issue I am getting error saying Style of undefined why is that?

  PM
• tangerine Posts: 3,365Questions: 39Answers: 395

  September 2017

  Please provide a link to your test case.
• pm5249 Posts: 28Questions: 8Answers: 0

  September 2017

  I am not able to provide the test case as the code is confidential. just let me know my table structure it disturbed when i use Datatable in bootstrap tabs. tables gets disturbed in the tab which is not active.
• pm5249 Posts: 28Questions: 8Answers: 0

  September 2017

  Can I make column fixed on button click?
• pm5249 Posts: 28Questions: 8Answers: 0

  September 2017

  One more issue Allen,
  When I use version 1.10.16 draw callback doesn't work.
• allan Posts: 63,552Questions: 1Answers: 10,477 Site admin

  September 2017

  When I use version 1.10.16 draw callback doesn't work.

  It appears to work without issue here: http://live.datatables.net/mahukuya/1/edit

  We'd need a link to a page showing the issue. As noted in the tech note I linked to before you can use services such as JSBin or JSFiddle to create a test case without the confidential information.

  I'm afraid I can't offer any help without a test case.

  Allan
• pm5249 Posts: 28Questions: 8Answers: 0

  September 2017

  Its Ok Allen,

  You have already helped me alot but I am not understanding why draw is not working rather it is not getting called.
• pm5249 Posts: 28Questions: 8Answers: 0

  September 2017

  Allen,

  does it need higher version of jquery like 1.11.3 which has been mentioned in link? I am using 1.10.2.
• pm5249 Posts: 28Questions: 8Answers: 0

  September 2017

  Allen,

  I cant show you the test case but here I have made one sample project over there its not working at all. You can see the screenshot
  .

  Sample.JPG 118.8K
• pm5249 Posts: 28Questions: 8Answers: 0

  September 2017

  https://jsfiddle.net/PM5249/fttne1eh/

  See this sample code link I am sharing.
• allan Posts: 63,552Questions: 1Answers: 10,477 Site admin

  September 2017

  drawCallBack

  That is wrong. As the documentation notes (and Kevin's example from the other thread on the same topic) it should be drawCallback. Note the capitalisation. Javascript is case sensitive.

  Allan