Форум

denis_kontarev · #1 (**permalink**) 26.09.2019, 13:14

Всем привет друзья. Есть таблица и код сортировки таблицы.

(function($){
	$.fn.tsort=function(){
		var
			v=function(e,i){return $(e).children('td').eq(i).text()},
			c=function(i){return function(a,b){var k=v(a,i),m=v(b,i);return $.isNumeric(k)&&$.isNumeric(m)?k-m:k.localeCompare(m)}};
		this.each(function(){
			var
				th=$(this).children('thead').first().find('tr > th'),
				tb=$(this).children('tbody').first();

			th.click(function(){
				var r=tb.children('tr').toArray().sort(c($(this).index()));
				th.removeClass('sel'),$(this).addClass('sel').toggleClass('asc');
				if($(this).hasClass('asc'))r=r.reverse();
				for(var i=0;i<r.length;i++)tb.append(r[i])
			})
		})
	}
})(jQuery);

$( document ).ready(function() {
	$('.tsort').tsort();
});

Наша таблица. В ней мы видим основную информацию и информацию, которая спрятана спойлером. Это связанная информация. При сортировки мы теряем этот спойлер и все скидывается в одну кучу.

<table class="tsort">

  <thead>
    <tr>
      <th>Начало</th>
      <th>Команды</th>
      <th>1</th>
      <th>X</th>
      <th>2</th>
      <th>TIP</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>00:30</td>
      <td>Боливия</td>
      <td>1.69</td>
      <td>3.74</td>
      <td>4.12</td>
    </tr>
    <tr>
    
      <td>
        <a href="#" class="spoiler-trigger"><span>Открыть подробную информацию</span></a>	
        <div class="spoiler-block">
        
        <table>
          <tbody>
            <tr>
              <td>Ф(-1)</td>
              <td>Ф(+1)</td>
            </tr>
            
            <tr>
              <td>1</td>
              <td>X</td>
              <td>2</td>
              <td>1</td>
              <td>X</td>
              <td>2</td>
            </tr>
            
            <tr>
              <td>2.62</td>
              <td>4.00</td>
              <td>2.00</td>
            </tr>
            
          </tbody>
        </table>
</table>

Получается так!

А должно быть как единый блок!

Прошу вас помогите. Как сделать сортировку по столбцам 1 Х 2 от меньшего к большему. Благодарю.

рони · #2 (**permalink**) 26.09.2019, 13:32

denis_kontarev,
html уточните, теги закройте и добавьте вторую команду.

рони · #3 (**permalink**) 26.09.2019, 14:34

denis_kontarev,
вариант на основе кода от Malleys https://codepen.io/Malleys/pen/dQGMbP?editors=0010
https://javascript.ru/forum/misc/758...tml#post498107

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  @import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700');
body {
    font-family: Roboto;
}

table {
    border-collapse: collapse
}

td, th {
    border: 2px solid red;
    width: 150px;
    height: 40px;
    text-align: center;
}

th {
    cursor: pointer;
    user-select: none;
}

th.sorted[data-order="-1"]::after {
    content: "▼"
}

th.sorted[data-order="1"]::after {
    content: "▲"
}
  </style>

  <script>
document.addEventListener('DOMContentLoaded', () => {
const getSort = ({ target }) => {
    const order = target.dataset.order = -(target.dataset.order || -1);
    const index = [...target.parentNode.cells].indexOf(target);
    const collator = new Intl.Collator(["en", "ru"], { numeric: true });
    const comparator = (index, order) => (a, b) => order * collator.compare(
    a.children[index].innerHTML,
    b.children[index].innerHTML);
    const tBody = target.closest("table").tBodies[0];
    let trs = [...tBody.rows].filter((el, i) => i % 2 == 0);
    trs.sort(comparator(index, order));
    trs.forEach(el => {
    const next = el.nextElementSibling;
    tBody.append(...[el,next])
    });
    for (const cell of target.parentNode.cells)
    cell.classList.toggle("sorted", cell === target);
};
document.querySelector('.tsort thead').addEventListener('click', getSort)
})




  </script>
</head>

<body>
<table class="tsort">

  <thead>
    <tr>
      <th>Начало</th>
      <th>Команды</th>
      <th>1</th>
      <th>X</th>
      <th>2</th>
      <th>TIP</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>00:30</td>
      <td>Боливия</td>
      <td>1.69</td>
      <td>3.74</td>
      <td>4.12</td>
    </tr>
    <tr>

      <td>
        <a href="#" class="spoiler-trigger"><span>Открыть подробную информацию боливия</span></a>
        <div class="spoiler-block">

        <table>
          <tbody>
            <tr>
              <td>Ф(-1)</td>
              <td>Ф(+1)</td>
            </tr>

            <tr>
              <td>1</td>
              <td>X</td>
              <td>2</td>
              <td>1</td>
              <td>X</td>
              <td>2</td>
            </tr>

            <tr>
              <td>2.62</td>
              <td>4.00</td>
              <td>2.00</td>
            </tr>

          </tbody>

        </table>
        </tr>

        <tr>
      <td>00:50</td>
      <td>Индия</td>
      <td>0.69</td>
      <td>63.74</td>
      <td>2.12</td>
    </tr>
    <tr>

      <td>
        <a href="#" class="spoiler-trigger"><span>Открыть подробную информацию  индия</span></a>
        <div class="spoiler-block">

        <table>
          <tbody>
            <tr>
              <td>Ф(-1)</td>
              <td>Ф(+1)</td>
            </tr>

            <tr>
              <td>1</td>
              <td>X</td>
              <td>2</td>
              <td>1</td>
              <td>X</td>
              <td>2</td>
            </tr>

            <tr>
              <td>2.62</td>
              <td>4.00</td>
              <td>2.00</td>
            </tr>

          </tbody>

        </table>
        </tr>
      </tbody>
</table>

</body>
</html>

denis_kontarev · #4 (**permalink**) 26.09.2019, 15:31

Благодарю Рони! Работает идеально!!!

Форум

Справочник

Discord чат

Курсы javascript