Сортировка данных, хранящихся в ID с помощью List.js

Katriel Lucas спросил: 12 мая 2018 в 04:12 в: javascript

List.js неправильно сортирует числа на моей HTML-таблице. Это происходит потому, что я использую inner-HTML на месте чисел, сортировка работает нормально, если я просто помещаю числа, а не идентификатор.

Почему бы просто не поместить числа на столе, как вы сказали?

Я признаю, что это лучшее решение, оно выигрывает от производительности и не использует javascript, НО:

  • Мне нужно изменить данные пару раз в день.

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

  • И, как следствие, боль для изменения данных на всех моих HTML-страницах, где я мог бы изменить только .js и их , все HTML будут обновлены.


Что я хочу:

Сделать кнопку "Числа" правильно сортировать данные внутри каждого из них:

document.getElementById("mushroom_N").innerHTML = "some_number";

, а не фактическое имя идентификатора. (в этом случае каждый "mushroom_N")


Условия:

  • Решение, которое использует List.js, а не другой плагин.

  • Я не использую jQuery, идеальным решением будет тот, который также не использует его.


Мой код ЗДЕСЬ на codepen, если вы предпочитаете.

Спасибо за внимание!

var options = {
  valueNames: ['name', 'number']
};

var userList = new List('users', options);

function myFunction() {
  document.getElementById("demo0").innerHTML = 10;
  document.getElementById("demo1").innerHTML = 1000;
  document.getElementById("demo2").innerHTML = 1;
  document.getElementById("demo3").innerHTML = 100;
}
.list {
  font-family: sans-serif;
}

td {
  padding: 10px;
  border: solid 1px #eee;
}

input {
  border: solid 1px #ccc;
  border-radius: 5px;
  padding: 7px 14px;
  margin-bottom: 10px
}

input:focus {
  outline: none;
  border-color: #aaa;
}

.sort {
  padding: 8px 30px;
  border-radius: 6px;
  border: none;
  display: inline-block;
  color: #fff;
  text-decoration: none;
  background-color: #f44336;
  height: 30px;
}

.sort:hover {
  text-decoration: none;
  background-color: #b71c1c;
}

.sort:focus {
  outline: none;
}

.sort:after {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content: "";
  position: relative;
  top: -10px;
  right: -5px;
}

.sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  content: "";
  position: relative;
  top: 4px;
  right: -5px;
}

.sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #fff;
  content: "";
  position: relative;
  top: -4px;
  right: -5px;
}

<html>
<html lang="en">

<head>
</head>

<body onload="myFunction()">

  <div id="users">

    <!-- "Search" -->
    <input class="search" placeholder="Search" />

    <!-- "Sort Buttons" -->
    <button class="sort" data-sort="name">A -> Z</button>
    <button class="sort" data-sort="number">Numbers</button>

    <!-- "The List" -->
    <ul class="list">
      <li>
        <h3 class="name">Mario</h3>
        <span class="number"><p id="demo3"></p></span>
      </li>
      <li>
        <h3 class="name">Luigi</h3>
        <span class="number"><p id="demo1"></p></span>
      </li>
      <li>
        <h3 class="name">Peach</h3>
        <span class="number"><p id="demo2"></p></span>
      </li>
      <li>
        <h3 class="name">Toad</h3>
        <span class="number"><p id="demo0"></p></span>
      </li>
    </ul>
  </div>

  <!-- "List.js" -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

</body>

</html>

1 ответ

Есть решение
Katriel Lucas ответил: 16 мая 2018 в 01:28

Welp, я сделал это!

Вам просто нужно создать массив и поместить элементы внутри другого. Codepen для кого-то заинтересованного или имеющего ту же самую проблему.

var mushs = [
  "100", // Mario
  "10", // Luigi
  "1000", // Peach
  "1" // Toad

  // A change in the values will affect all places at the same time.

];

var options = {
  valueNames: ['name', 'mushrooms'],
  item: '<tr><td class="mdl-data-table__cell--non-numeric name"></td><td class="mushrooms"></td></tr>'
};

var values = [{
    name: 'Mario',
    mushrooms: mushs[0]
  },
  {
    name: 'Luigi',
    mushrooms: mushs[1]
  },
  {
    name: 'Peach',
    mushrooms: mushs[2]
  },
  {
    name: 'Toad',
    mushrooms: mushs[3]
  }
];

var userList = new List('users', options, values);

document.getElementById("mushroom_0").innerHTML = mushs[0];
document.getElementById("mushroom_1").innerHTML = mushs[1];
document.getElementById("mushroom_2").innerHTML = mushs[2];
document.getElementById("mushroom_3").innerHTML = mushs[3];
body {
  margin: 0;
  padding: 20px;
}

input {
  border: solid 1px #ccc;
  border-radius: 5px;
  padding: 7px 14px;
  margin-bottom: 10px
}

input:focus {
  outline: none;
  border-color: #aaa;
}
<div id="users">

  <input class="search" placeholder="Search">

  <table class="mdl-data-table mdl-js-data-table">
    <div id="mdl-table">
      <thead>
        <tr>
          <th class="mdl-data-table__cell--non-numeric">
            <button class="mdl-button mdl-js-button mdl-button--icon sort" data-sort="name">
              <i class="mdl-color-text--red-500 material-icons">sort_by_alpha</i>
            </button>
          </th>
          <th>
            <button class="mdl-button mdl-js-button mdl-button--icon sort" data-sort="mushrooms">
              <i class="mdl-color-text--red-500 material-icons">swap_vertical_circle</i>
            </button>
          </th>
        </tr>
      </thead>

      <tbody class="list"></tbody>

    </div>
  </table>
</div>

<p></p>

<div>Hey, I know that Mario got <span id="mushroom_0"></span> mushrooms, also, Luigi got <span id="mushroom_1"></span> of them, Peach was greed and got at least <span id="mushroom_2"></span> mushs, and Toad got only <span id="mushroom_3"></span>, himself.</div>



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/material-design-lite@1.3.0/material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://cdn.jsdelivr.net/npm/material-design-lite@1.3.0/dist/material.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/javve/list.js@1.5.0/dist/list.min.js"></script>