Использование AJAX для фильтрации всех данных в столбце в порядке ASC/DESC

ProgramBox

Использование AJAX для фильтрации всех данных в столбце в порядке ASC/DESC

Post author:admin
Запись опубликована:8 января, 2022
Post category:Вопросы по программированию

#ajax

Вопрос:

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

 $sql = SELECT count(*) AS cnt
         FROM table 1 t LEFT JOIN user_table c ON t.agent_id = c.id 
         GROUP BY COALESCE(t.agent_id, 0), c.display_name 
         ORDER BY c.display_name IS NULL, c.display_name;
        $query = $this->db->query($sql);
        return $query;

И это дало мне следующий вывод, содержащий данные таблицы от A до Z с точки зрения названия:

введите описание изображения здесь

Теперь я хочу иметь возможность фильтровать эти данные в порядке ASC и DESC, когда я нажимаю на их заголовки таблицы. Вот код, который у меня есть для моей таблицы:

  <thead>
          <tr>
          <th><div onclick=//Some method>Agent</div></th>
          <th><div onclick=//Some method>Count</div></th>
          </tr>
        </thead>
<?php
         if(isset($agent_count) amp;amp; count($agent_count) > 0)
           {
            foreach($agent_count as $row ){                             
          ?>
              <tr>
                    <td><?= $row->name ?></td>
                    <td><?= $row->cnt ?></td>
              </tr>
          <?php }  } ?>

Итак, здесь, чтобы упорядочить данные, я предполагаю, что необходимо выполнить вызов AJAX, чтобы упорядочить данные в DESC, если они уже являются ASC, или в ASC, если они уже являются DESC. Кроме того, если я нажму на заголовок «Количество», чтобы получить эти данные в порядке убывания, то столбец «Агент» также должен отсортироваться в соответствии с его соответствующими данными.

1. Вы можете добиться того же с помощью javascript. Нет необходимости делать еще один вызов ajax. Вы можете просто получить данные один раз с сервера, а затем с помощью javascript отсортировать таблицу.

2. Не могли бы вы показать в примере кода, как я могу отсортировать данные с помощью javascript?

Ответ №1:

Вы можете добиться того же с помощью javascript. Нет необходимости делать еще один вызов ajax. Вы можете просто получить данные один раз с сервера, а затем с помощью javascript отсортировать таблицу.

Источник: Сортировка таблицы HTML по щелчку заголовка

 function sortTable(n) {
    var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
    table = document.getElementById("myTable");
    switching = true;
    //Set the sorting direction to ascending:
    dir = "asc";
    /*Make a loop that will continue until
    no switching has been done:*/
    while (switching) {
        //start by saying: no switching is done:
        switching = false;
        rows = table.rows;
        /*Loop through all table rows (except the
        first, which contains table headers):*/
        for (i = 1; i < (rows.length - 1); i  ) {
            //start by saying there should be no switching:
            shouldSwitch = false;
            /*Get the two elements you want to compare,
            one from current row and one from the next:*/
            x = rows[i].getElementsByTagName("TD")[n];
            y = rows[i   1].getElementsByTagName("TD")[n];
            /*check if the two rows should switch place,
            based on the direction, asc or desc:*/
            if (dir == "asc") {
                if (x.innerHTML.match(/^-?d $/) amp;amp; y.innerHTML.match(/^-?d $/)) {
                    if (Number(x.innerHTML) > Number(y.innerHTML)) {
                        //if so, mark as a switch and break the loop:
                        shouldSwitch = true;
                        break;
                    }
                } else if (x.innerHTML.match(/^d .d $/) amp;amp; y.innerHTML.match(/^d .d $/)) {
                    if (Number(x.innerHTML) > Number(y.innerHTML)) {
                        //if so, mark as a switch and break the loop:
                        shouldSwitch = true;
                        break;
                    }
                } else {
                    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                        //if so, mark as a switch and break the loop:
                        shouldSwitch = true;
                        break;
                    }
                }
            } else if (dir == "desc") {
                if (x.innerHTML.match(/^-?d $/) amp;amp; y.innerHTML.match(/^-?d $/)) {
                    if (Number(x.innerHTML) < Number(y.innerHTML)) {
                        //if so, mark as a switch and break the loop:
                        shouldSwitch = true;
                        break;
                    }
                } else if (x.innerHTML.match(/^d .d $/) amp;amp; y.innerHTML.match(/^d .d $/)) {
                    if (Number(x.innerHTML) < Number(y.innerHTML)) {
                        //if so, mark as a switch and break the loop:
                        shouldSwitch = true;
                        break;
                    }
                } else {
                    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                        //if so, mark as a switch and break the loop:
                        shouldSwitch = true;
                        break;
                    }
                }
            }
        }
        if (shouldSwitch) {
            /*If a switch has been marked, make the switch
            and mark that a switch has been done:*/
            rows[i].parentNode.insertBefore(rows[i   1], rows[i]);
            switching = true;
            //Each time a switch is done, increase this count by 1:
            switchcount  ;
        } else {
            /*If no switching has been done AND the direction is "asc",
            set the direction to "desc" and run the while loop again.*/
            if (switchcount == 0 amp;amp; dir == "asc") {
                dir = "desc";
                switching = true;
            }
        }
    }
}

 table {
      border-spacing: 0;
      width: 100%;
      border: 1px solid #ddd;
    }

    th {
      cursor: pointer;
    }

    th, td {
      text-align: left;
      padding: 16px;
    }

    tr:nth-child(even) {
      background-color: #f2f2f2
    }

     <!DOCTYPE html>
    <html>
    <head>
    <title>Sort a HTML Table Alphabetically</title>

    </head>
    <body>

    <table id="myTable">
      <tr>
       <!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->  
        <th onclick="sortTable(0)">Name</th>
        <th onclick="sortTable(1)">Country</th>
        <th onclick="sortTable(2)">Count</th>
        <th onclick="sortTable(3)">Rating</th>
      </tr>
      <tr>
        <td>Berglunds snabbkop</td>
        <td>Sweden</td>
        <td>5</td>
        <td>4.5</td>
      </tr>
      <tr>
        <td>North/South</td>
        <td>UK</td>
        <td>3</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Germany</td>
        <td>1</td>
        <td>2.8</td>
      </tr>
      <tr>
        <td>Koniglich Essen</td>
        <td>Germany</td>
        <td>78</td>
        <td>0.9</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Italy</td>
        <td>5</td>
        <td>4.5</td>
      </tr>
      <tr>
        <td>Paris specialites</td>
        <td>France</td>
        <td>7</td>
        <td>1.3</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>UK</td>
        <td>0</td>
        <td>1.2</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Canada</td>
        <td>2</td>
        <td>3.5</td>
      </tr>
    </table>

    </body>
    </html>

1. Хорошо, это сработало для столбца «мои имена», но для столбца «Количество», в котором отображаются числа, он отображается как 1 11 12 2 20 22 3…

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

3. @H2O Попробуй это. он изменяется как для строк, так и для чисел

4. @fatalcoder524 Хорошо, теперь он правильно выполняет числовую часть, но в моем вопросе, который я задал, я хочу иметь возможность щелкнуть по обоим заголовкам, чтобы отфильтровать его. Поэтому я попытался x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase() || Number(x.innerHTML) > Number(y.innerHTML) получить номер фильтра и строки, но сейчас я не могу их отфильтровать

5. можете ли вы запустить фрагмент сейчас? Я кое-что изменил. При нажатии на заголовок таблицы он теперь правильно сортируется.

Метки: Использование AJAX для фильтрации всех данных в столбце в порядке ASC/DESC