个人中心
gpt4 book ai didi

javascript - 分页和排序表的问题

转载 作者：行者123 更新时间：2023-11-30 13:47:02 27 4
gpt4 key购买 nike

我制作了一个带有分页的 Javascript 表格。分页调用 js 文件中的 LoadFunction，在我拥有的项目集合中，我获取结果并显示它。

因此，如果我加载页面并单击表格的标题列，它会正确排序。但是，当我单击分页更改结果页面并再次单击标题栏时，排序不起作用。

在调试控制台时，我看到第一次在排序代码中停止，但在分页后，不要停止。

fiddle :Fiddle 

$('.columns th').on("click", function() {
  var i = $(this).index();
  var cols = $('.columns th');

  cols.each(function(index, item) {
    if (index != i) {
      if ($(item).children().length == 2) {
        if ($(this).children().hasClass('fa-sort-up') || $(this).children().hasClass('fa-sort-down')) {
          $(this).children()[1].remove();
        }
      } else {
        if ($(this).children().hasClass('fa-sort-up') || $(this).children().hasClass('fa-sort-down')) {
          $(this).children().remove();
        }
      }
    }
  });

  if ($(this).children().length != 0) {
    var icon;

    if ($(this).children().length == 2) {
      icon = $(this).children()[1]
    } else {
      icon = $(this).children()[0]
    };

    if ($(icon).hasClass('fa-sort-up')) {
      $(icon).removeClass('fa-sort-up');
      $(icon).addClass('fa-sort-down');
    } else {
      if ($(icon).hasClass('fa-sort-down')) {
        $(icon).removeClass('fa-sort-down');
        $(icon).addClass('fa-sort-up');
      }
    }
  } else {
    $(this).append('<i class="fa fa-sort-up"></i>');
  }
});
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script>
        $(document).ready(function(){
            var options = {
                valueNames: [ 'column1', 'column2' ],
		        listClass: 'main-rows'
	        };

            var sortColumns = new List('tableUsers', options);

            $('.columns th').on("click", function(){
                var i = $(this).index();
                var cols = $('.columns th');
                
                cols.each(function(index, item){
                    if(index != i){
                        if($(item).children().length == 2){
                            if($(this).children().hasClass('fa-sort-up') || $(this).children().hasClass('fa-sort-down')){
                                $(this).children()[1].remove();
                            }
                        }else{
                            if($(this).children().hasClass('fa-sort-up') || $(this).children().hasClass('fa-sort-down')){
                                $(this).children().remove();
                            }
                        }
                    }
                });

                if($(this).children().length != 0){
                    var icon;

                    if($(this).children().length == 2){
                        icon = $(this).children()[1]
                    }else{
                        icon = $(this).children()[0]
                    };
                    
                    if($(icon).hasClass('fa-sort-up')){
                        $(icon).removeClass('fa-sort-up');
                        $(icon).addClass('fa-sort-down');
                    }else{
                        if($(icon).hasClass('fa-sort-down')){
                            $(icon).removeClass('fa-sort-down');
                            $(icon).addClass('fa-sort-up');
                        }
                    }
                }else{
                    $(this).append('<i class="fa fa-sort-up"></i>');
                } 
            });
        });
    </script>
</head>
<body>
    <div class="col-12">
        <table id="tableUsers" class="table table-bordered m-table">
            <thead class="columns">
                <tr>
                <th class="column1 sort text-center" data-sort="column1" style="width: 50% !important;">Id</th>
                <th class="column2 sort text-center" data-sort="column2" style="width: 50% !important;">Date</th>
                </tr>
            </thead>
            <tbody class="main-rows list">
                <tr class="tdRow">
                <td class="column1 sort text-center" style="width: 50% !important;">709</td>
                <td class="column2 sort text-center" style="width: 50% !important;">7/11/2019 14:13:47</td>
                </tr>
                <tr class="tdRow">
                <td class="column1 sort text-center" style="width: 50% !important;">737</td>
                <td class="column2 sort text-center" style="width: 50% !important;">8/11/2019 14:34:04</td>
                </tr>
                <tr class="tdRow">
                <td class="column1 sort text-center" style="width: 50% !important;">740</td>
                <td class="column2 sort text-center" style="width: 50% !important;">11/11/2019 10:09:45</td>
                </tr>
                <tr class="tdRow">
                <td class="column1 sort text-center" style="width: 50% !important;">798</td>
                <td class="column2 sort text-center" style="width: 50% !important;">14/11/2019 12:33:58</td>
                </tr>
                <tr class="tdRow">
                <td class="column1 sort text-center" style="width: 50% !important;">802</td>
                <td class="column2 sort text-center" style="width: 50% !important;">14/11/2019 14:30:03</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

表格是相同的，因为当我点击分页并找到结果时，绘制表格的函数是相同的(并且“列”类在所有情况下都存在)。

发生了什么？

如果您需要更多信息，请告诉我。

最佳答案

可以使用数据表 https://datatables.net/examples/data_sources/js_array 或使用 jquery 的插件。

关于javascript - 分页和排序表的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59102148/

27 4 0
文章推荐： javascript - HTML 文件不会在浏览器中显示任何内容
文章推荐： javascript - 如何从 Javascript 日期中获取年份的最后 2 位数字
文章推荐： javascript - 如果组件中有 getter，如何更改 v-overlay 的值？
文章推荐： javascript - uuidv4.js 正则表达式问题 - IE11
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com