Javascript html table hidding columns

Question

Я разработал этот аккуратный кусочек кода, который задал элемент и правильно отформатированную таблицу, создает выпадающее меню на элементе, что позволяет пользователю переключаться между представлениями столбцов.

Я не могу понять, как сделать изменения (какие столбцы остаются скрытыми) сохраняется при смене страницы, так как это обычный шаблон для таблицы на странице с разбиением на страницы.

скрипку: https://jsfiddle.net/mssrq8ah/

моего HTML разметка:

<table id="table"> 
    <thead> 
     <tr> 
      <th>h1</th><th>h2</th><th>h3</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>a1</td><td>a2</td><td>a3</td> 
     </tr> 
     <tr> 
      <td>b1</td><td>b2</td><td>b3</td> 
     </tr> 
    </tbody> 
</table> 
<button id="list">drop</button> 

моя функция JS:

table_hide("#list","#table") 
function table_hide(button , table) 
     { 

      jQuery(button).attr("data-toggle","dropdown"); 
      jQuery(button).addClass("dropdown-toggle"); 
      jQuery(button).wrap("<div class='btn-group'>"); 
      var list = ""; 
      jQuery("thead").find("tr").first().find("th").each(function(index,element){ 
       list = list + "<li>" + 
       "<div class='checkbox col-md-6'><label><input type='checkbox' checked value='"+index+"' class='td_hide'>"+jQuery(element).text()+"</label></div>"+ 
       "</li>"; 
      }); 
      jQuery(button).after("<ul class='dropdown-menu col-md-12'>"+list+"</ul>"); 


      jQuery(".td_hide").on("click",function(){ 
         var target_column = jQuery(this).val(); 
         jQuery("tr").each(function(index , element){ 

          jQuery(this).find("th , td").eq(target_column).toggle(); 
         }); 
       }); 

      jQuery(".dropdown-menu").find("select , .ws-popover-opener , .step-control").on("click",function(e){ 
       e.stopPropagation(); 
       }); 
     } 

, если вообще возможно, я хотел бы, чтобы избежать каких-либо более необходимых библиотек, как я умысел использовать его на CMS, а jQuery/bootstrap в наши дни является стандартом.

Answer 1

Voila!

спасибо за местное хранилище, действительно помог мне.

https://jsfiddle.net/mssrq8ah/1/

<table id="table"> 
    <thead> 
     <tr> 
      <th>h1</th><th>h2</th><th>h3</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>a1</td><td>a2</td><td>a3</td> 
     </tr> 
     <tr> 
      <td>b1</td><td>b2</td><td>b3</td> 
     </tr> 
    </tbody> 
</table> 
<button id="list">drop</button> 

Javascript

table_hide("#list","#table") 
function table_hide(button , table) 
     { 
      var cookie_domain = window.location.href + query_params("page")+"hidden"; 

      jQuery(button).attr("data-toggle","dropdown"); 
      jQuery(button).addClass("dropdown-toggle"); 
      jQuery(button).wrap("<div class='btn-group'>"); 
      var list = ""; 
      jQuery("thead").find("tr").first().find("th").each(function(index,element){ 
       list = list + "<li>" + 
       "<div class='checkbox col-md-6'><label><input type='checkbox' checked value='"+index+"' class='td_hide'>"+jQuery(element).text()+"</label></div>"+ 
       "</li>"; 
      }); 
      jQuery(button).after("<ul class='dropdown-menu col-md-12'>"+list+"</ul>"); 

      jQuery("thead").find("tr").first().find("th").each(function(index , element){ 
        if(localStorage.getItem(cookie_domain+index) == "true") 
        { 
         jQuery(".td_hide").eq(index).attr('checked', false); 
         jQuery("tr").each(function(index2 , element2){ 
          jQuery(this).find("th , td").eq(index).toggle(); 
         }); 
        } 
       }); 
      jQuery(".td_hide").on("click",function(){ 
         var target_column = jQuery(this).val(); 
         jQuery("tr").each(function(index , element){ 
          if(jQuery(this).find("th , td").eq(target_column).first().css('display') == 'none') 
          { 
           localStorage.setItem(cookie_domain+target_column, 'false'); 
          } 
          else 
          { 
           localStorage.setItem(cookie_domain+target_column, 'true'); 
          } 
          jQuery(this).find("th , td").eq(target_column).toggle(); 
         }); 
       }); 

      jQuery(".dropdown-menu").find("select , .ws-popover-opener , .step-control").on("click",function(e){ 
       e.stopPropagation(); 
       }); 
     } 

function query_params(name){ 
       if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search)) 
        return decodeURIComponent(name[1]); 
      } 

любой может с помощью этого кода до тех пор, пока он не утверждает, что это за ~

страницы query_params части правильно создать его экземпляр для страницы администрирования wordpress. Вы можете заменить строку cookie_domain на все, что, по вашему мнению, сделает ее уникальной на вашем сайте, так как два вызова сценария для двух таблиц не будут обмениваться данными друг с другом (мне понадобилось некоторое время, чтобы понять это)