Сортировка таблицы, нажав на заголовки столбцов

У меня возникла проблема с сортировкой данных в таблице, нажав на название столбца. Я попробовал много решений для этого. Но проблема в том, что, похоже, она работает нормально, когда я добавляю строки в таблицу, используя метод javascript insertRow(). После ввода новых строк, когда я нажимаю на любой столбец, старые данные только сортируются, и новая строка, вставленная в javascript, исчезает. А вот код: Вы можете найти файл gs_sortable.js в этой ссылке http://www.allmyscripts.com/Table_Sort/Сортировка таблицы, нажав на заголовки столбцов

<script type="text/javascript"> 
     var TSort_Data = new Array ('my_table', 's', 'd', 'c', 'i');    
    </script> 
    <title>JSP Page</title> 
</head> 
<body><h3 align="center" > 
    </h3><table class="table-autosort" width="100%"> <table id="my_table"> 
      <thead> 
       <tr> 
        <th width="25%">Product</th> 
        <th width="25%">Date</th> 
        <th width="25%">Price per unit</th> 
        <th width="25%">Units sold</th> 
       </tr> 
      </thead> 
      <tr> 
       <td width="25%" >Item A</td> 
       <td width="25%">14/5/2012</td> 
       <td width="25%">$28</td> 
       <td width="25%"> 1</td> 
      </tr> 
      <tr> 
       <td width="25%"> Item B</td> 
       <td width="25%">14/5/2012</td> 
       <td width="25%">$35</td> 
       <td width="25%">1</td> 

      </tr> 
      <tr> 
       <td width="25%">Item A</td> 
       <td width="25%">13/5/2012</td> 
       <td width="25%">$25.15</td> 
       <td width="25%">20</td> 
      </tr> 
      <tr> 
       <td width="25%">Item C</td> 
       <td width="25%">15/5/2012</td> 
       <td width="25%">$20</td> 
       <td width="25%">100</td> 
      </tr> 
     </table> 
     <button type="button" onclick="displayResult()">Insert new row</button> 
    </table> 

</body>

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

Спасибо

источник

2013-10-15 user1934199

Вы можете использовать [Datatables jquery plugin] (http://datatables.net/) для этой цели? –

Вот рабочая скрипку с раствором http://jsfiddle.net/GbGx5/4/

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

Для этого вызывать следующие методы (как это рекомендовано в документации под Использование сценария с динамически загружаемых таблицhttp://www.allmyscripts.com/Table_Sort/#example)

// Make sure we refresh the TSort_Data Array! 
TSort_Data = new Array ('my_table', 's', 'd', 'c', 'i'); 
tsRegister(); 
tsSetTable('my_table'); 
tsInit();

Полный JavaScript примера выглядит следующим образом ...

var TSort_Data = new Array ('my_table', 's', 'd', 'c', 'i');    

function insertNewRow() { 
    var table=document.getElementById("my_table"), 
     newRowIndex = table.getElementsByTagName('tr').length, 
     row=table.insertRow(newRowIndex), 
     cell1=row.insertCell(0), 
     cell2=row.insertCell(1), 
     cell3=row.insertCell(2),   
     cell4=row.insertCell(3); 

    cell1.innerHTML = "New Item"; 
    cell2.innerHTML = "15/10/2013"; 
    cell3.innerHTML = "$5"; 
    cell4.innerHTML = 51;  

    // Make sure we refresh the TSort_Data Array! 
    TSort_Data = new Array ('my_table', 's', 'd', 'c', 'i'); 
    tsRegister(); 
    tsSetTable('my_table'); 
    tsInit();  
}

источник

2013-10-15 13:33:31

Большое вам спасибо. Это здорово! – user1934199

Сортировка таблицы, нажав на заголовки столбцов

ответ

Смежные вопросы