table sorter column selector not working

[RajuTicvic]

Hi,

i used the table sorter plugin in my project, and also i added table column selector widget in this, i used https://mottie.github.io/tablesorter/docs/example-widget-column-selector.html like the link. its working but not correctly when i select to show the table column using columnselector dropdown its show column related column only not show table td that look like empty table td

please help me to fix this

thank you

[Mottie]

Hi @RajuTicvic!

Please modify this demo to show the problem being described.

[RajuTicvic]

Hi @Mottie i used the same thing above your link and its working good, but when i converted to my laravel project file is not working , please help me

 <table id="controlerlist_table" class="table table-bordered  mb-0 tbl_len">
                  <thead>
                  <tr class="" >
                     <th width="30" class="columnSelector-disable"></th>
                     <th width="100" id="th_name" data-column-selector="disable">Name</th>
                     <th width="50" id="th_Globalid">Global Controller ID</th>
                     <th width="100" id="th_Status">Status</th>
                     <th width="100" id="th_mdate">Last Modified Time</th>
                     <th width="100" id="th_mby" >Last Modified By</th>
                     </tr>
                  </thead>

      <tbody>
      @php
                     if(isset($controller_list)) {
                     $i=1;
                     foreach($controller_list as $l) {
                     @endphp
                     <tr class="rowlen">
                        <td><input type="checkbox" class="check checktemp" value="{{$i}}" onclick="row_selection(<?php echo $i ?>)" /></td>
                        <input type="hidden" id="controllerName{{$i}}" value="{{$l['controllerName']}}" >
                        <td id="tr_name{{$i}}"><a href="javascript:void(0);" class="lnkbtn" onclick="editController(<?php echo $i  ?>);">{{ $l['controllerName'] }}</a></td>
                        <td id="tr_Globalid{{$i}}">{{ $l['siteId'] }}</td>
                        <td id="tr_Status{{$i}}">{{ $l['workflowStatus'] }}</td>
                        <input type="hidden" id="w_Status{{$i}}" value="{{$l['workflowStatus']}}" >
                        <?php 
                           $ModifiedTime = date('l, F jS  Y,H:i', strtotime($l['lastModifiedTime']));

                           ?> 
                        <td id="tr_mdate{{$i}}">{{ $ModifiedTime }}</td>
                        <td  id="tr_mby{{$i}}">{{ $l['lastModifiedBy'] }}</td>
                     </tr>
                     @php
                     $i++;
                     }
                     }
                     @endphp

</tbody>

               </table>

$(function() {
  var pagerOptions = {
    container: $(".pager"),
    // ajaxUrl: null,
    // customAjaxUrl: function(table, url) { return url; },
    // ajaxError: null,
    // ajaxObject: { dataType: 'json' },
    // ajaxProcessing: null,
    // processAjaxOnInit: true,
    // output: '{startRow:input} – {endRow} / {totalRows} rows',
    // updateArrows: true,
    // page: 0,
    // size: 10,
    // savePages : true,
    // storageKey:'tablesorter-pager',
    // pageReset: 0,
    // fixedHeight: true,
    // removeRows: false,
    // countChildRows: false,

    // css class names of pager arrows
    cssNext: ".next",
    cssPrev: ".prev",
    cssFirst: ".first",
    cssLast: ".last",
    cssGoto: ".gotoPage",

    cssPageDisplay: ".pagedisplay",
    cssPageSize: ".pagesize",

    cssDisabled: "disabled",
    cssErrorRow: "tablesorter-errorRow"
  };

  $("#controlerlist_table")
    .tablesorter({
      showProcessing: true,
      theme: "blue",
      widthFixed: true,
      headers: { 0: { sorter: false, filter: false } },
      widgets: ["zebra", "filter", "columnSelector"],
      widgetOptions: {
        filter_searchFiltered: false,
        // target the column selector markup
        // target the column selector markup
        columnSelector_container: $("#columnSelector"),
        // column status, true = display, false = hide
        // disable = do not display on list
        columnSelector_columns: {
          0: "disable" /* set to disabled; not allowed to unselect it */
        },
        // remember selected columns (requires $.tablesorter.storage)
        columnSelector_saveColumns: true,

        // container layout
        columnSelector_layout: '<label><input type="checkbox">{name}</label>',
        // layout customizer callback called for each column
        // function($cell, name, column) { return name || $cell.html(); }
        columnSelector_layoutCustomizer: null,
        // data attribute containing column name to use in the selector container
        columnSelector_name: "data-selector-name",

        /* Responsive Media Query settings */
        // enable/disable mediaquery breakpoints
        columnSelector_mediaquery: true,
        // toggle checkbox name
        columnSelector_mediaqueryName: "Reset: ",
        // breakpoints checkbox initial setting
        columnSelector_mediaqueryState: true,
        // hide columnSelector false columns while in auto mode
        columnSelector_mediaqueryHidden: true,

        // set the maximum and/or minimum number of visible columns; use null to disable
        columnSelector_maxVisible: null,
        columnSelector_minVisible: null,
        // responsive table hides columns with priority 1-6 at these breakpoints
        // see http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/#Applyingapresetbreakpoint
        // *** set to false to disable ***
        columnSelector_breakpoints: [
          "20em",
          "30em",
          "40em",
          "50em",
          "60em",
          "70em"
        ],
        // data attribute containing column priority
        // duplicates how jQuery mobile uses priorities:
        // http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/
        columnSelector_priority: "data-priority",

        // class name added to checked checkboxes - this fixes an issue with Chrome not updating FontAwesome
        // applied icons; use this class name (input.checked) instead of input:checked
        columnSelector_cssChecked: "checked",

        // class name added to rows that have a span (e.g. grouping widget & other rows inside the tbody)
        columnSelector_classHasSpan: "hasSpan",

        // event triggered when columnSelector completes
        columnSelector_updated: "columnUpdate"
      }
    })
    .tablesorterPager(pagerOptions);

  $(".goto").click(function() {
    $("#controlerlist_table").trigger("pageAndSize");
    $("#controlerlist_table").trigger("pageAndSize", [1, 10]);
  });

  $("#controlerlist_table").trigger("refreshColumnSelector", true);
});

[Mottie]

Please validate the HTML... at first glance, I see that this input (<input type="hidden".../>) is not inside a table cell. This will mess up the column selector.

[RajuTicvic]

Hi @Mottie ! Thank you so much. after applied your comments in my code that is working very good, once again thank you so much.