Функция сортировки работает только в Mozilla - PullRequest
Новая
       30

Функция сортировки работает только в Mozilla

0 голосов
/ 12 июня 2019

У меня проблема с этой функцией сортировки. В Mozilla он работает нормально, но когда я пробую Chrome или IE, он ничего не делает. Я надеюсь, что кто-то может помочь.

Я нашел кое-что об операторах для array.sort в Mozilla https://allenpike.com/2009/arraysort-browser-differences но это не помогло

https://jsfiddle.net/dojpw86a/1/

HTML 

<div class="sortcon">
  <button id="offerdown" onClick="$('#allbdcontainer .bdcontainer').sort(sortbyoffer).appendTo('#allbdcontainer')">
  sortofferup
  </button>
   <button id="offerup" onClick="$('#allbdcontainer .bdcontainer').sort(sortbyoffer).appendTo('#allbdcontainer')">
  sortofferdown
  </button>

<div id="allbdcontainer"> 

<div class="bdcontainer">

<div class="clear">
</div>

<div class="bdshowfromdate">01.11.2018
</div>

<div class="seperator">-
</div>

<div class="bdshowtodate">31.12.2025
</div>

<div class="bdshowoffer">P3
</div>

</div>

<div class="bdcontainer">

<div class="clear">
</div>

<div class="bdshowfromdate">01.11.2018
</div>

<div class="seperator">-
</div>

<div class="bdshowtodate">31.12.2019
</div>

<div class="bdshowoffer">P1D
</div>

</div>

<div class="bdcontainer">

<div class="clear">
</div>

<div class="bdshowfromdate">15.10.2018
</div>

<div class="seperator">-
</div>

<div class="bdshowtodate">20.10.2018
</div>

<div class="bdshowoffer">P2V
</div>

</div>

<div class="bdcontainer">

<div class="clear">
</div>

<div class="bdshowfromdate">15.10.2018
</div>

<div class="seperator">-
</div>

<div class="bdshowtodate">28.10.2018
</div>

<div class="bdshowoffer">P2V
</div>

</div>

<div class="bdcontainer">

<div class="clear">
</div>

<div class="bdshowfromdate">07.08.2019
</div>

<div class="seperator">-
</div>

<div class="bdshowtodate">04.09.2019
</div>

<div class="bdshowoffer">P1D
</div>

</div>

<div class="bdcontainer">

<div class="clear">
</div>

<div class="bdshowfromdate">22.03.2020
</div>

<div class="seperator">-
</div>

<div class="bdshowtodate">25.03.2020
</div>

<div class="bdshowoffer">P2I
</div>

</div>
</div>

функция: 

 function sortbyoffer(a, b) {
  if(event.target.id == 'offerup')
  {
      return $(a).find(".bdshowoffer").text() < $(b).find(".bdshowoffer").text();
  }
  else if(event.target.id == 'offerdown')
  {
    return $(a).find(".bdshowoffer").text() > $(b).find(".bdshowoffer").text();
  }
}

Ответы [ 2 ]

0 голосов
/ 13 июня 2019

Вот ответ без массива, как попросил @natiole в комментарии. 

function sortList(sortDirection) {
  let list = $('.bdcontainer')
  list.sort((a, b) => {
    if ($(a).find('.bdshowoffer').text() < $(b).find('.bdshowoffer').text()) {
      return -1 * sortDirection
    }
    if ($(a).find('.bdshowoffer').text() > $(b).find('.bdshowoffer').text()) {
      return 1 * sortDirection
    }
    return 0
  })
  return list
}

function renderList(list, container) {
  let htmlString = ''
  // jQuery .each()
  list.each((i, el) => {
    htmlString += $(el).prop('outerHTML')
  })
  container
    .empty()
    .append(htmlString)
}


jQuery(document).ready(function($) {

  $('#offerdown').on('click', function(e) {
    renderList(sortList(1), $('#allbdcontainer'))
  })
  $('#offerup').on('click', function(e) {
    renderList(sortList(-1), $('#allbdcontainer'))
  })

})
.bdshowfromdate,
.seperator,
.bdshowtodate,
.bdshowoffer {
  float: left;
  line-height: 30px;
  margin-right: 68px;
}

.bdcontainer {
  width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sortcon">
  <button id="offerdown">
  sortofferup
  </button>
  <button id="offerup">
  sortofferdown
  </button>

  <div id="allbdcontainer">

    <div class="bdcontainer">

      <div class="clear">
      </div>

      <div class="bdshowfromdate">01.11.2018
      </div>

      <div class="seperator">-
      </div>

      <div class="bdshowtodate">31.12.2025
      </div>

      <div class="bdshowoffer">P3
      </div>

    </div>

    <div class="bdcontainer">

      <div class="clear">
      </div>

      <div class="bdshowfromdate">01.11.2018
      </div>

      <div class="seperator">-
      </div>

      <div class="bdshowtodate">31.12.2019
      </div>

      <div class="bdshowoffer">P1D
      </div>

    </div>

    <div class="bdcontainer">

      <div class="clear">
      </div>

      <div class="bdshowfromdate">15.10.2018
      </div>

      <div class="seperator">-
      </div>

      <div class="bdshowtodate">20.10.2018
      </div>

      <div class="bdshowoffer">P2V
      </div>

    </div>

    <div class="bdcontainer">

      <div class="clear">
      </div>

      <div class="bdshowfromdate">15.10.2018
      </div>

      <div class="seperator">-
      </div>

      <div class="bdshowtodate">28.10.2018
      </div>

      <div class="bdshowoffer">P2V
      </div>

    </div>

    <div class="bdcontainer">

      <div class="clear">
      </div>

      <div class="bdshowfromdate">07.08.2019
      </div>

      <div class="seperator">-
      </div>

      <div class="bdshowtodate">04.09.2019
      </div>

      <div class="bdshowoffer">P1D
      </div>

    </div>

    <div class="bdcontainer">

      <div class="clear">
      </div>

      <div class="bdshowfromdate">22.03.2020
      </div>

      <div class="seperator">-
      </div>

      <div class="bdshowtodate">25.03.2020
      </div>

      <div class="bdshowoffer">P2I
      </div>

    </div>
  </div>

Это правильное решение, но я думаю, что предыдущее лучше (например, обработка массивов в JS быстрее, меньше зависит от jQuery и т. Д.).).

0 голосов
/ 12 июня 2019

Вот решение вашей проблемы - хотя и немного измененное.

Суть в том, что я создал массив объектов, в котором хранятся все данные таблицы, и создал необходимые функции для отображения этих данных.

Я также добавил функцию переключения, которая работает вместе с другой сортировкой ASC / DESC. 

// adding toggle function
let toggleDirection = 1
// data array
let dataArray = [{
    bdshowfromdate: '01.11.2018',
    bdshowtodate: '31.12.2025',
    bdshowoffer: 'P3'
  },
  {
    bdshowfromdate: '01.11.2018',
    bdshowtodate: '31.12.2019',
    bdshowoffer: 'P1D'
  },
  {
    bdshowfromdate: '15.10.2018',
    bdshowtodate: '20.10.2018',
    bdshowoffer: 'P2V'
  },
  {
    bdshowfromdate: '15.10.2018',
    bdshowtodate: '28.10.2018',
    bdshowoffer: 'P2V'
  },
  {
    bdshowfromdate: '07.08.2019',
    bdshowtodate: '04.09.2019',
    bdshowoffer: 'P1D'
  },
  {
    bdshowfromdate: '22.03.2020',
    bdshowtodate: '25.03.2020',
    bdshowoffer: 'P2I'
  },
]

// generating the HTML to be displayed as the table
function tableHtml(tableData) {
  let ret = ''
  tableData.forEach(item => {
    ret += '<div class="bdcontainer">'
    ret += '<div class="clear"></div>'
    ret += `<div class="bdshowfromdate">${item.bdshowfromdate}</div>`
    ret += '<div class="seperator">-</div>'
    ret += `<div class="bdshowtodate">${item.bdshowtodate}</div>`
    ret += `<div class="bdshowoffer">${item.bdshowoffer}</div>`
    ret += '</div>'
  })
  return ret
}

// adding the generated HTML to the DOM
function refreshTable(tableData) {
  const htmlString = tableHtml(tableData)
  jQuery("#allbdcontainer")
    .empty()
    .append(htmlString)
}

// sorting function
function sortTable(tableData, sortDirection) {
  tableData.sort((a, b) => {
    if (a.bdshowoffer < b.bdshowoffer) {
      return -1 * sortDirection
    }
    if (a.bdshowoffer > b.bdshowoffer) {
      return 1 * sortDirection
    }
  })
  return tableData
}

jQuery(document).ready(function($) {
  // initial display of data
  refreshTable(dataArray)

  $('#offerdown').on('click', function(e) {
    dataArray = sortTable(dataArray, 1)
    refreshTable(dataArray)
    toggleDirection = -1
  })
  $('#offerup').on('click', function(e) {
    dataArray = sortTable(dataArray, -1)
    refreshTable(dataArray)
    toggleDirection = 1
  })
  $('#toggle').on('click', function(e) {
    dataArray = sortTable(dataArray, toggleDirection)
    refreshTable(dataArray)
    toggleDirection = toggleDirection * -1
  })


})
.bdshowfromdate,
.seperator,
.bdshowtodate,
.bdshowoffer {
  float: left;
  line-height: 30px;
  margin-right: 68px;
}

.bdcontainer {
  width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sortcon">
  <button id="offerdown">
  sortofferdown
  </button>
  <button id="offerup">
  sortofferup
  </button>
  <button id="toggle">
  toggleSorting
  </button>

  <div id="allbdcontainer"></div>

С этим решением

  • проще изменить шаблон таблицы

  • проще добавить новые свойства в таблицу

  • проще добавлять функции сортировки к различным свойствам

  • проще обрабатывать данные

  • лучше масштабируется

...