Cортировка c помощью планина jquery - tablesorter

sky-sky · October 8, 2018

Попробовал создать сортировку в таблице, как это указано в примере, не она не работает

в обоих таблицах и нет кнопок для сортировки как это показано в примере?

index.html

Скрытый текст


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/datatables.min.css" />
    <link rel="stylesheet" type="text/css" href="css/style-v2.css" />
    <script type="text/javascript" src="plugin/datatables.min.js"></script>
 
    <script type="text/javascript" src="plugin/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="plugin/jquery.tablesorter.js"></script> 
    
    <meta charset="utf-8" />
</head>
<body>
    <div class="tbl-header">
        <table id="myTable" class="tablesorter">
            <thead>
                <tr>
                     <th class="header">Code</th>
                     <th class="header">Company</th>
                     <th class="header">Price</th>
                     <th class="header">Change</th>
                     <th class="header">Change %</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="tbl-content">
        <table id="myTable" class="tablesorter">
            <tbody>
                <tr>
                    <td>AAC</td>
                    <td>AUSTRALIAN COMPANY </td>
                    <td>$1.38</td>
                    <td>+2.01</td>
                    <td>-0.36%</td>
                </tr>
                <tr>
                    <td>AAD</td>
                    <td>AUSENCO</td>
                    <td>$2.38</td>
                    <td>-0.01</td>
                    <td>-1.36%</td>
                </tr>
                <tr>
                    <td>AAX</td>
                    <td>ADELAIDE</td>
                    <td>$3.22</td>
                    <td>+0.01</td>
                    <td>+1.36%</td>
                </tr>
                <tr>
                    <td>XXD</td>
                    <td>ADITYA BIRLA</td>
                    <td>$1.02</td>
                    <td>-1.01</td>
                    <td>+2.36%</td>
                </tr>
                <tr>
                    <td>AAC</td>
                    <td>AUSTRALIAN COMPANY </td>
                    <td>$1.38</td>
                    <td>+2.01</td>
                    <td>-0.36%</td>
                </tr>
                <tr>
                    <td>AAD</td>
                    <td>AUSENCO</td>
                    <td>$2.38</td>
                    <td>-0.01</td>
                    <td>-1.36%</td>
                </tr>
                <tr>
                    <td>AAX</td>
                    <td>ADELAIDE</td>
                    <td>$3.22</td>
                    <td>+0.01</td>
                    <td>+1.36%</td>
                </tr>
                <tr>
                    <td>XXD</td>
                    <td>ADITYA BIRLA</td>
                    <td>$1.02</td>
                    <td>-1.01</td>
                    <td>+2.36%</td>
                </tr>
                <tr>
                    <td>AAC</td>
                    <td>AUSTRALIAN COMPANY </td>
                    <td>$1.38</td>
                    <td>+2.01</td>
                    <td>-0.36%</td>
                </tr>
                <tr>
                    <td>AAD</td>
                    <td>AUSENCO</td>
                    <td>$2.38</td>
                    <td>-0.01</td>
                    <td>-1.36%</td>
                </tr>
                <tr>
                    <td>AAX</td>
                    <td>ADELAIDE</td>
                    <td>$3.22</td>
                    <td>+0.01</td>
                    <td>+1.36%</td>
                </tr>
                <tr>
                    <td>XXD</td>
                    <td>ADITYA BIRLA</td>
                    <td>$1.02</td>
                    <td>-1.01</td>
                    <td>+2.36%</td>
                </tr>
                <tr>
                    <td>AAC</td>
                    <td>AUSTRALIAN COMPANY </td>
                    <td>$1.38</td>
                    <td>+2.01</td>
                    <td>-0.36%</td>
                </tr>
                <tr>
                    <td>AAD</td>
                    <td>AUSENCO</td>
                    <td>$2.38</td>
                    <td>-0.01</td>
                    <td>-1.36%</td>
                </tr>
                <tr>
                    <td>AAX</td>
                    <td>ADELAIDE</td>
                    <td>$3.22</td>
                    <td>+0.01</td>
                    <td>+1.36%</td>
                </tr>
                <tr>
                    <td>XXD</td>
                    <td>ADITYA BIRLA</td>
                    <td>$1.02</td>
                    <td>-1.01</td>
                    <td>+2.36%</td>
                </tr>
                <tr>
                    <td>AAC</td>
                    <td>AUSTRALIAN COMPANY </td>
                    <td>$1.38</td>
                    <td>+2.01</td>
                    <td>-0.36%</td>
                </tr>
                <tr>
                    <td>AAD</td>
                    <td>AUSENCO</td>
                    <td>$2.38</td>
                    <td>-0.01</td>
                    <td>-1.36%</td>
                </tr>
                <tr>
                    <td>AAX</td>
                    <td>ADELAIDE</td>
                    <td>$3.22</td>
                    <td>+0.01</td>
                    <td>+1.36%</td>
                </tr>
                <tr>
                    <td>XXD</td>
                    <td>ADITYA BIRLA</td>
                    <td>$1.02</td>
                    <td>-1.01</td>
                    <td>+2.36%</td>
                </tr>
                <tr>
                    <td>AAC</td>
                    <td>AUSTRALIAN COMPANY </td>
                    <td>$1.38</td>
                    <td>+2.01</td>
                    <td>-0.36%</td>
                </tr>
                <tr>
                    <td>AAD</td>
                    <td>AUSENCO</td>
                    <td>$2.38</td>
                    <td>-0.01</td>
                    <td>-1.36%</td>
                </tr>
                <tr>
                    <td>AAX</td>
                    <td>ADELAIDE</td>
                    <td>$3.22</td>
                    <td>+0.01</td>
                    <td>+1.36%</td>
                </tr>
                <tr>
                    <td>XXD</td>
                    <td>ADITYA BIRLA</td>
                    <td>$1.02</td>
                    <td>-1.01</td>
                    <td>+2.36%</td>
                </tr>
                <tr>
                    <td>AAC</td>
                    <td>AUSTRALIAN COMPANY </td>
                    <td>$1.38</td>
                    <td>+2.01</td>
                    <td>-0.36%</td>
                </tr>
                <tr>
                    <td>AAD</td>
                    <td>AUSENCO</td>
                    <td>$2.38</td>
                    <td>-0.01</td>
                    <td>-1.36%</td>
                </tr>
                <tr>
                    <td>AAX</td>
                    <td>ADELAIDE</td>
                    <td>$3.22</td>
                    <td>+0.01</td>
                    <td>+1.36%</td>
                </tr>
                <tr>
                    <td>XXD</td>
                    <td>ADITYA BIRLA</td>
                    <td>$1.02</td>
                    <td>-1.01</td>
                    <td>+2.36%</td>
                </tr>
                <tr>
                    <td>AAC</td>
                    <td>AUSTRALIAN COMPANY </td>
                    <td>$1.38</td>
                    <td>+2.01</td>
                    <td>-0.36%</td>
                </tr>
                <tr>
                    <td>AAD</td>
                    <td>AUSENCO</td>
                    <td>$2.38</td>
                    <td>-0.01</td>
                    <td>-1.36%</td>
                </tr>
                <tr>
                    <td>AAX</td>
                    <td>ADELAIDE</td>
                    <td>$3.22</td>
                    <td>+0.01</td>
                    <td>+1.36%</td>
                </tr>
                <tr>
                    <td>XXD</td>
                    <td>ADITYA BIRLA</td>
                    <td>$1.02</td>
                    <td>-1.01</td>
                    <td>+2.36%</td>
                </tr>
            </tbody>
        </table>
    </div>
    <br />
    <br />
    <div>
        <table id="myTable" class="tablesorter">
            <thead>
                <tr>
                    <th class="header">Last Name</th>
                    <th class="header">First Name</th>
                    <th class="header">Email</th>
                    <th class="header">Tor</th>
                    <th class="header">Web Site</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Smith</td>
                    <td>John</td>
                    <td>jsmith@gmail.com</td>
                    <td>$50.00</td>
                    <td>http://www.jsmith.com</td>
                </tr>
                <tr>
                    <td>Bach</td>
                    <td>Frank</td>
                    <td>fbach@yahoo.com</td>
                    <td>$50.00</td>
                    <td>http://www.frank.com</td>
                </tr>
                <tr>
                    <td>Doe</td>
                    <td>Jason</td>
                    <td>jdoe@hotmail.com</td>
                    <td>$100.00</td>
                    <td>http://www.jdoe.com</td>
                </tr>
                <tr>
                    <td>Conway</td>
                    <td>Tim</td>
                    <td>tconway@earthlink.net</td>
                    <td>$50.00</td>
                    <td>http://www.timconway.com</td>
                </tr>
            </tbody>
        </table>
 
    </div>
 
    <script type="text/javascript" src="js/script.js"></script> 
    <script type="text/javascript" src="plugin/jquery.tablesorter.js"></script> 
</body>
</html>

сss

Скрытый текст


table {
    table-layout: fixed; /* задает алгоритм использования макета таблицы.
       fixed - Фиксированный алгоритм макета таблицы 
    */
    border-spacing: 1px; /*Задаёт расстояние между границами ячеек в таблице. */
}
 
/* ширина заголовка*/
.tbl-header table {
    width: 100%;
}
 
/* ширина основной части*/
.tbl-content table {
    width: 101.5%;
}
 
/* border + padding - это замена свойства cellpadding, которое 
    определяет расстояние между границей ячейки и её содержимым. 
    Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым её размеры.*/
th {
    border: 1px solid blue;
    padding: 10px 0; /*Первое значение устанавливает 
        поля от верхнего и нижнего краёв, 
        второе — от левого и правого.*/
    text-align: center; /* по центру*/
    font-weight: 800;
    font-size: 15px;
    color: #1365d7;
    text-transform: uppercase; /*заглавные буквы*/
}
 
 
 
/*блок ячеек заголовка*/
.tbl-header {
    background: #ceea19;
    overflow-x: auto;
}
 
/* тело таблицы*/
.tbl-content {
    height: 300px;
    overflow-x: auto; /*Горизонтальная полоса прокрутки добавляется только
         при необходимости.*/
    margin-top: 0px;
    border: 1px solid #9797e8; /*рамка блока, в котром находится основная 
        часть таблицы */
}
 
 
 
/* Стилизация ячеек в таблице (в информационной части)*/
td {
    border: 1px solid blue;
    padding: 10px 0; /*Первое значение устанавливает 
        поля от верхнего и нижнего краёв, 
        второе — от левого и правого.*/
    text-align: left; /* выранивания по горизонатали - по левой стороне*/
    vertical-align: middle; /* выранивания по вертикали - по середине*/
    font-weight: 600;
    font-size: 15px;
    color: #808080;
}

js

Скрытый текст


$(window).on("load resize", function () {
    var scrollWidth = $('.tbl-content').width() - $('.tbl-content table').width();
    $('.tbl-header').css({ 'padding-right': scrollWidth });
}).resize();
 
 
 
$(document).ready(function () {
    $("#myTable").tablesorter({ sortList: [[0, 0], [1, 0]] });
}
);

в чем ошибка и почему кнопки сортировки не видны ?

WebSite-scroll-horizontal-vertical.rar

mrnobody · October 9, 2018

Во-первых, лучше выкладывать код в песочницах codepen либо jsfiddle.

Во-вторых, у вас айдишник `myTable` повторяется три раза в разметке — так нельзя. id на то и id, что он уникальный на странице. Поэтому я использовал класс `tablesorter` который у вас был указан.

https://codepen.io/corvus-007/pen/bmgvQG?editors=1010

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

UPD:. Для прилипания шапки использовал плагин floatThead

https://codepen.io/corvus-007/pen/PyWeJZ?editors=1010

sky-sky · October 10, 2018

В 09.10.2018 в 12:02, mrnobody сказал:

https://codepen.io/corvus-007/pen/bmgvQG?editors=1010

Я исправил js, но ничего не получается.

У вас в песочнице все работает, хоть и невидно, как вы подключили плагины.

Может плагины не подключаются ?

$(window).on("load resize", function () {
    var scrollWidth = $(".tbl-content").width() - $(".tbl-content table").width();
    $(".tbl-header").css({ "padding-right": scrollWidth });
}).resize();



$(document).ready(function () {
    $(".tablesorter").tablesorter({ sortList: [[0, 0], [1, 0]] });
}
);

а вот так подключил плагины

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/style-v2.css" />

    <script type="text/javascript" src="plugin/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="plugin/jquery.tablesorter.js"></script> 
    
    <meta charset="utf-8" />
</head>
<body>
  .......
  
     </div>

    <script type="text/javascript" src="js/script.js"></script> 
</body>
</html>

Как это можно проверить?

Edited October 10, 2018 by sky-sky

mrnobody · October 10, 2018

sky-sky · October 10, 2018

В 09.10.2018 в 12:02, mrnobody сказал:

https://codepen.io/corvus-007/pen/bmgvQG?editors=1010

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

Я скачивал последние версии, из официальных источников

В 09.10.2018 в 12:02, mrnobody сказал:

https://codepen.io/corvus-007/pen/bmgvQG?editors=1010

Решил следующим образом.

Для начала указал ссылку из сети. Затем браузером открыл исходный код, в нем перешел по ссылке и мне было показано содержимое плагина jquery.tablesorter.min.js, я скопировал код и отредактировал локальный файл.

Только пришлось с этим файлом так поступить, хотя я скачивал ранее с офф. сайта версию jquery.tablesorter.min.js, при этом несколько раз и она почему то не работает.

Вот как теперь у меня подключено.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <link rel="stylesheet" type="text/css" href="css/style-v2.css" />
    <script type="text/javascript" src="plugin/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="plugin/jquery.tablesorter.min.js"></script> 
      <script type="text/javascript" src="jquery.floatThead.min.js"></script>
     <meta charset="utf-8" />
</head>

Спасибо за помощь.

А почему скачанное с офф.сайта не работает, это обычная практика, разве следят только за версиями которые расположены на ресурсах CDN ?

Sign In

Cортировка c помощью планина jquery - tablesorter

Question

sky-sky

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

mrnobody

Link to comment

Share on other sites

sky-sky

Link to comment

Share on other sites

mrnobody

Link to comment

Share on other sites

sky-sky

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information