Сортировать таблицу, созданную с помощью document.write() в JavaScript

Я написал следующий код, который отображает таблицу из 4 столбцов на успех AJAX. Я хочу отсортировать эту таблицу на основе 4 столбцов. Я пытался сделать это, используя некоторые готовые файлы.js, доступные в Интернете, но безуспешно. Как я могу достичь требования?

function Success(data)
{
    var obj;
    obj=JSON.parse(data);
    document.write("<html><head><title>Browser Service</title></head>");
    **document.write("<script type='text/javascript', src='sorttable.js'>
    <\/script>");**
    document.write("<body bgcolor=#E0DCDC>");
    document.write("<div id=example-table>");
    document.write("<h2 align=center>Browser Version Details</h2>");
    document.write("<table class='**sortable**', border-collapse=collapse, 
    width=60%, border=1px solid #ddd, align=center>");
    document.write("<tr bgcolor=#209D9D>");
    document.write("<th height=50>");
    document.write("Name");
    document.write("</th>");
    document.write("<th height=50>");
    document.write("Number1");
    document.write("</th>");
    document.write("<th height=50>");
    document.write("Number2");
    document.write("</th>");
    document.write("<th height=50>");
    document.write("Number3");
    document.write("</th>");
    document.write("</tr>");
    document.write("<br>");

    for(i=0; i<obj.length; i=i+4)
    {
        document.write("<tr bgcolor=#ffffff>"); 
        document.write("<td align=center>");    
        document.write(obj[i]);
        document.write("</td>");    
        document.write("<td align=center>");    
        document.write(obj[i+1]);
        document.write("</td>");
        document.write("<td align=center>");    
        document.write(obj[i+2]);
        document.write("</td>");
        document.write("<td align=center>");    
        document.write(obj[i+3]);
        document.write("</td>");
        document.write("</tr>");    
    }

    document.write("</table>");
    document.write("</div>");
    document.write("</body></html>");
}

</script>

Я добавил легкодоступный sorttable.js файл для достижения цели. Я перешел по ссылке: https://www.kryogenix.org/code/browser/sorttable/

Источник

1 ответ

Решение

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

Некоторые указатели:

  • старайтесь держать код сухим ("не повторяйте себя") - поэтому использование циклов может минимизировать объем кода, который вам нужно написать.
  • Я создал всю разметку в одну строку в многократно используемой функции и затем прикрепил ее к странице, а не записывал ее постепенно.
  • Я использовал CSS для стилизации таблицы, а не для встроенных стилей, которые очень сложно поддерживать.
  • Я прикрепил слушателей событий к th элементы, так что при нажатии на разные столбцы данные сортируются, а затем разметка переделывается с помощью функции. Обратите внимание, что, поскольку разметка изменяется, вам необходимо заново подключить прослушиватели событий к th элементы, так что вы можете сортировать по другому столбцу, если хотите.

Я поместил некоторые случайные данные в иллюстративных целях.

var arr_data = [
  {
    "Name"   : "A",
    "Number1": 34,
    "Number2": 354,
    "Number3": 2
  },
    {
    "Name"   : "B",
    "Number1": 4356,
    "Number2": 45,
    "Number3": 57
  },
    {
    "Name"   : "C",
    "Number1": 9389,
    "Number2": 435,
    "Number3": 345
  },
    {
    "Name"   : "D",
    "Number1": 3,
    "Number2": 34,
    "Number3": 5645
  }
];


function buildTable( arr_data ){

  var html = '<table><thead><tr>';
  for( var key in arr_data[0] ){
    html += '<th>' + key + '</th>';
  }
  html += '</tr></thead><tbody>';
  
  arr_data.forEach(function(item){
    html += '<tr>';
    for( var prop in item ){
      html += '<td>' + item[prop] + '</td>';
    }
    html += '</tr>';
  });
  
  html += '</tbody></table>';
  return html;
}

(function init(){
  document.getElementsByClassName( 'table' )[0].innerHTML = buildTable( arr_data );
  attachEventListeners();
})();

function attachEventListeners(){
  var headers = document.getElementsByTagName( 'th' );
  for( var i = 0; i< headers.length; i++){
    var header = headers[i];
    header.addEventListener( 'click', function( event ){
      arr_data.sort( dynamicSort( this.innerHTML ) );
      document.getElementsByClassName( 'table' )[0].innerHTML = buildTable( arr_data );
      attachEventListeners();
    });
  }
}

// borrowed from https://stackru.com/questions/1129216/sort-array-of-objects-by-string-property-value-in-javascript
function dynamicSort(property) {
  var sortOrder = 1;
  if(property[0] === "-") {
    sortOrder = -1;
    property = property.substr(1);
  }
  return function (a,b) {
    var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
    return result * sortOrder;
  }
}
table {
  border: 1px solid #dddddd;
  width: 60%;
  border-collapse: collapse;
}

thead tr {
  background-color: #209d9d;
  cursor: pointer;
}

thead tr th:hover {
  background-color: #1c8d8d;
}

tr {
  height: 50px;
}

th,
td {
  text-align: center;  
}
<div class="table"></div>

Источник
Другие вопросы по тегам