Jquery tablesorter : 서로 다른 html 페이지에있는 두 개의 테이블에 정렬 순서를 유지하는 방법 (헤더가 동일하지만 순서와 일부가 숨겨져있는 것)

Question

두 개의 html 페이지가 있고 동일한 데이터가있는 테이블이 있습니다. 다른 순서 및 일부 열은 한 테이블에 숨겨져 다른 테이블에는 숨겨지지 않습니다. 두 테이블의 초기 정렬을 다른 테이블 정렬을 기반으로하고 싶습니다. 현재 sortEnd에서 sortList와 비슷한 2 차원 배열을 만드는 스크립트가 있습니다. 첫 번째 배열의 인덱스 대신에 열의 이름이 대체됩니다. 그런 다음이 배열을 sessionStoreage에 저장하여 두 번째 html 페이지에서이 배열에 액세스 할 수 있습니다. 그러나이 배열을 다시 변환하여 열 이름이 두 번째 테이블의 적절한 인덱스로 다시 변경되도록하는 방법이 확실하지 않습니다. 나는 tablesorter의 Mottie 포크를 사용하고 있습니다. 아래는 다른 HTML 페이지로 보낼 2 차원 배열을 만들기 위해 만든 첫 번째 스크립트입니다.

<script> 
$(document).ready(function() 
    { 
    var currentSort; 

     $("#myTable").tablesorter({ 

      widthFixed: false, 

      theme: "blue", 

      sortReset : true, 


      widgets: ['stickyHeaders'], 

      widgetOptions: { 
       stickyHeaders_addResizeEvent: true 
      } 



    }).bind("sortEnd", function(event) { 
     var table = event.target, 
     currentSort = table.config.sortList; 
     // target the first sorted column 
     var columnNum; 
     var columnName; 
     var currentSortwColumnNames = [[],[]]; 

     for(var x = 0; x < currentSort.length; x ++) 
      { 
      if (!currentSort[x]) 
      {     
       currentSort[x] = []; 
      } 
      if (!currentSortwColumnNames[x]) 
      {     
       currentSortwColumnNames[x] = []; 
      } 


      columnNum = currentSort[x][0]; 
      columnName = $(table.config.headerList[columnNum]).text(); 
      currentSortwColumnNames[x][0] = columnName; 



      currentSortwColumnNames[x][1] = currentSort[x][1]; 

      } 

     console.log(currentSortwColumnNames.toString()); 
     sessionStorage.setItem("currentSortwColumnNames",  currentSortwColumnNames); 
    }) 

    } 
); 


</script> 

Answer 1

내가 배열을 생성하지만, JSON 문자열로 설정을 유지하지 않을 :

var jsonSettings = JSON.stringify(table.config.sortList); 

및 쿠키에서이 값을 저장합니다. 필요하면, 그냥 객체에 다시 구문 분석 :

var obj = JSON.parse(jsonSettings); 

Answer 2

저장하고 해당 테이블에 정렬을 복원 할 saveSort widget를 사용할 수 있습니다. 기본적으로 각 페이지의 각 테이블에 대해 별도로 정렬을 저장합니다. 트릭이 다른 페이지에 두 개의 테이블에서 작동하도록 얻을 수있는 저장 옵션을 설정하는 것입니다

• true에 storage_useSessionStorage 위젯 옵션을 설정, 세션 스토리지를 설정합니다.

  $(function() { 
      $("#myTable").tablesorter({ 
      widthFixed: false, 
      theme: "blue", 
      sortReset: true, 
      widgets: ['stickyHeaders', 'saveSort'], 
      widgetOptions: { 
       stickyHeaders_addResizeEvent: true, 
       storage_useSessionStorage: true 
      } 
      }); 
  }); 
  

  이제 "sortEnd"코드가 필요하지 않습니다.

• 그런 다음 storage_page 위젯 옵션으로 설정된 두 테이블에서 일치하는 data-table-page 속성 (모든 문자열)을 설정하십시오.

  <table data-table-page="mytable">...</table> 
  

은 자세한 내용은 storage function 설명서를 참조하십시오.