Вопрос по sorting, html – HTML таблица сортировки

12

Так что в основном я выполняю запрос mysql, который выбирает данные из моей базы данных и отображает их в удобной для чтения форме для моих пользователей. Имя ----- Адрес ---- Продавец

Ты понял суть. А теперь я хочу позволить пользователю сортировать HTML-таблицу, скажем, по продажам. Как я мог бы легко сделать это, используя выпадающее меню? Это то, что я имею до сих пор .... Я просто не знаю, как сказать меню для сортировки HTML-таблицы.

<div class='menu'>
<ul>
    <li><a href='#'><span>Sales Person</span></a>
  <ul>
     <li><a href='#'><span>Melissa</span></a></li>
     <li><a href='#'><span>Justin</span></a></li>
     <li><a href='#'><span>Judy</span></a></li>
     <li><a href='#'><span>Skipper</span></a></li>
     <li><a href='#'><span>Alex</span></a></li>
  </ul>
   </li>
</div>

Любая помощь очень ценится.

Два основных подхода: сортируйте серверную часть в запросе к базе данных или используйте структуру данных javascript, которую вы сортируете на стороне браузера. И то и другое потребует гораздо больше работы, что видно здесь. Denys Séguret

Ваш Ответ

4   ответа
31

можете ли вы использовать любой из перечисленных ниже плагинов JQuery. Просто потрясающе и предоставляет широкий спектр вариантов для работы, и меньше проблем для интеграции. :)

http: //tablesorter.com/docs - Таблица Сортировщик.
https: //github.com/paulopmx/Flexigri - Flexgrid
http: //datatables.net/inde - Таблицы данных.
https: //github.com/tonytomov/jqGri

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

Я не уверен, что ты правильно понял мой вопрос. Я хочу иметь возможность сортировать данные, которые отображаются в виде HTML при выполнении запроса. Так я могу использовать таблицы данных, чтобы сделать это все еще? h3tr1ck
DataTables была настолько безумно проста в настройке и отличная документация и примеры. Josh Peak
Это тоже хорошо: Kryogenix.org / код / браузер / sorttable zadrozny
0

Просто еще один вариант с использованием плагина jquery, Breedjs: Если вы помещаете данные в объект js, вы можете сделать это так:

var data = {
    people: [
        {name: 'a', address: 'c', salesperson: 'b'},
        {name: 'b', address: 'b', salesperson: 'a'},
        {name: 'c', address: 'a', salesperson: 'c'},
    ]
};

breed.run({
    scope: 'people',
    input: data
});

HTML:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Sales Person</th>
        </tr>
    </thead>
    <tbody>
        <tr b-scope="people" b-loop="person in people">
            <td b-sort="name">{{person.name}}</td>
            <td b-sort="address">{{person.address}}</td>
            <td b-sort="salesperson">{{person.salesperson}}</td>
        </tr>
    </tbody>
</table>

Теперь, каждый раз, когда вы хотите отсортировать по продавцу, просто позвоните:

breed.sort({
    scope: 'people',
    selector: 'salesperson'
});

Если вы хотите сортировать при нажатии на<th>, сделай это

$("th").click(function(){
    breed.sort({
        scope: 'people',
        selector: $(this).attr('sort')
    });
});

И измените это в HTML:

<th sort='name'>Name</th>
<th sort='address'>Address</th>
<th sort='salesperson'>Sales Person</th>

Пример работы на скрипке

0

W3.JS Сортировка HTML)

<script src="https://www.w3schools.com/lib/w3.js"></script>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<p>Click the <strong>table headers</strong> to sort the table accordingly:</p>

<table id="usersTable" class="w3-table-all">
  <tr>
    <th onclick="w3.sortHTML('#usersTable', '.item', 'td:nth-child(1)')" style="cursor:pointer">Name</th>
    <th onclick="w3.sortHTML('#usersTable', '.item', 'td:nth-child(2)')" style="cursor:pointer">Address</th>
    <th onclick="w3.sortHTML('#usersTable', '.item', 'td:nth-child(3)')" style="cursor:pointer">Sales Person</th>
  </tr>

  <tr class="item">
    <td>user:2911002</td>
    <td>UK</td>
    <td>Melissa</td>
  </tr>
  <tr class="item">
    <td>user:2201002</td>
    <td>France</td>
    <td>Justin</td>
  </tr>
  <tr class="item">
    <td>user:2901092</td>
    <td>San Francisco</td>
    <td>Judy</td>
  </tr>
  <tr class="item">
    <td>user:2801002</td>
    <td>Canada</td>
    <td>Skipper</td>
  </tr>
  <tr class="item">
    <td>user:2901009</td>
    <td>Christchurch</td>
    <td>Alex</td>
  </tr>

</table>

-1
Пока эта ссылка может ответить на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылки, могут стать недействительными, если связанная страница изменится. - Из обзора juzraai

Похожие вопросы