您的足迹:首页 > 未分类 >怎样用JS写一个下拉加载数据的table

怎样用JS写一个下拉加载数据的table

QQ截图20170519112816.png

效果和方法完全由自己写js控制实现,这边写下流程和原理。

STEP1:

表格采用bootstrap效果样式实现。

STEP2:

写好后台调用数据的接口,可以使前台ajax可以通过调用接口来获取后台的分页数据

STEP3:

前台调用代码示例:

 $.ajax(
          {
              url: '@Url.Action("XXXFlightPartial", "XXXBSAttention")',
              type: 'POST',
              dataType: 'text',
              cache: false,
              data: { .............},
              timeout: 50000,
              error: function () {
                  alert("Time Out!");
              },
              success: function (result, status, xmlHttp) {

                  if (result.indexOf('/Account/Login') > -1) {
                      window.location.href = "@Url.Action("Login", "Account")";
                  }
                  else {
                      $('#loadFlight').empty();
                      $('#loadFlight').html(result);
                  }
              }
          });
    }
返回result的接口由自己控制,可以是直接的html代码,也可以是json结果集,通过js处理后绑定到table中。

STEP4:

这边最重要的讲解是,监控滚动条,滚动到底部的时候触发ajax向后台请求新数据,格式化后append到table的后部,在这边加载的时候放一个延时加载中的样式动图和说明,比如:正在加载中... 。

在append数据前再删除正在加载的样式和说明。

相关代码如下:

<script type="text/javascript">
    //美化内部滚动条
    $('#tScroll').niceScroll({
        cursorcolor: "#ccc",//#CC0071 光标颜色
        cursoropacitymax: 1, //改变不透明度非常光标处于活动状态(scrollabar“可见”状态),范围从1到0
        touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
        cursorwidth: "5px", //像素光标的宽度
        cursorborder: "0", // 游标边框css定义
        cursorborderradius: "5px",//以像素为光标边界半径
        autohidemode: false //是否隐藏滚动条
    });

    //初始化排序
    $("#dynamic-table").tablesorter();


    //排序的方向
    $(".thclass").click(function(){
        if($(this).hasClass("sorting"))
        {
            $(".thclass").removeClass("sorting_asc").addClass("sorting");
            $(".thclass").removeClass("sorting_desc").addClass("sorting");
            $(this).removeClass("sorting").addClass("sorting_asc");
        }
        else if($(this).hasClass("sorting_asc"))
        {
            $(".thclass").removeClass("sorting_asc").addClass("sorting");
            $(".thclass").removeClass("sorting_desc").addClass("sorting");
            $(this).removeClass("sorting").addClass("sorting_desc");
        }
        else
        {
            $(".thclass").removeClass("sorting_asc").addClass("sorting");
            $(".thclass").removeClass("sorting_desc").addClass("sorting");
            $(this).removeClass("sorting").addClass("sorting_asc");
        }
    });

    var timer;
    //滚动条状态
    var stop = false;
    //滚动条监控
    $(document).ready(function () {
        var clientHeight = 550;
        //距下边界长度/单位px
        var range = 0;
        //设置加载最多次数
        var maxnum = @(totalRecord/20);
        var num = 1;
        var totalheight = 0;
        //水平滚动条值
        var lastLeftScroll=0;
        //垂直滚动条值
        var lastRightScroll=0
        //主体元素
        var main = $("#dynamic-table tbody");
        $(".tScroll").scroll(function () {
            if (stop)
                return;
            //判断是不是左右滚动条
            var scLeft= $(".tScroll").scrollLeft();
            if(scLeft!=lastLeftScroll)
            {
                lastLeftScroll=scLeft;
                return;
            }
            //滚动条距顶部距离
            var srollPos = $(".tScroll").scrollTop();

            //滚动方向判断
            var directionSroll;
            if(srollPos<lastRightScroll) {
                directionSroll=false;   //向上滚动
            } else {
                directionSroll=true;
            }
            lastRightScroll=srollPos;

            //监听鼠标滚动结束事件
            $("#flowThead").css({"display":"none"});
            if(timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function(){
                if(srollPos>40)
                {
                    $("#flowThead").css({"display":"block"});
                    $("#flowThead").css({"top":srollPos-1,"position":"absolute"});
                    $("#dynamic-table").css({"top":0,"position":"absolute"});
                }
                else
                {
                    $("#flowThead").css({"display":"block"});
                    $("#flowThead").css({"top":0,"position":"absolute"});
                    $("#dynamic-table").css({"top":44,"position":"absolute"});
                }
            },400);


            totalheight = parseFloat(clientHeight) + parseFloat(srollPos);
            if (($("#dynamic-table").height() - range) <= totalheight && num != maxnum) {
                stop = true;
                @{
                    int HeaderCount = columnHeaders.Split(',').Count()+6;
                }
                main.append("<tr id='loadimg'> <td colspan='@(HeaderCount)'><img src='../Resource/BSResource/front-style/images/input-spinner.gif' />loading data...</td></tr>")
                $('#tScroll').niceScroll().resize();
                setTimeout(loadData, 1000);
                num++;
            }
        });
    });

    // 下拉加载最新的数据
    function loadData() {
        var main = $("#dynamic-table tbody");
        $("#loadimg").remove();
        $.ajax(
        {
            url: '/BSAttention/FlightPartialByPage',
            type: 'POST',
            dataType: 'text',
            cache: false,
            data: { "DepartCode": "@(departCode)", "DescentCode": "@(descentCode)", "PageIndex": @(pageindex+1), "SelectMode": "@(selectMode)", "Sort": "sortflight,asc", "ColumnHeaders": "@(columnHeaders)", "IsFirst": 1 },
            timeout: 50000,
            error: function () {
                alert("Time Out!");
            },
            success: function (result, status, xmlHttp) {
                main.append(result);
                $('#tScroll').niceScroll().resize();
                $("#dynamic-table").trigger("update");
            }
        });
        stop = false;
    }

    //判断返回值是否是空
    var isArray = function(obj) {
        return (Object.prototype.toString.call(obj) === '[object Array]' && obj.length>0);
    }

    //获取弹出框View
    function GetFlowControls(id,callsign)
    {
        $.ajax(
      {
          url: '/AjaxService/vffcHandler.ashx',
          type: 'GET',
          cache: false,
          dataType:"json",
          data:{stype:"vf",sid:id},
          timeout: 50000,
          error: function () {
              alert("Time Out!");
              console.log(result);
          },
          success: function (result, status, xmlHttp) {
              $("#viewModalLabel").html("FLOW CONTROL INFO-"+callsign);
              if(!isArray(result)){
                  $('#viewModalDiv').css({"width":600});
                  $('#viewContent').html("There have no flow control information about this flight.");
              }
              else
              {
                  var tableValue="<table class=\"table\" style='table-layout:fixed ; width:100%;'><tr><th style='width:150px'>Source</th><th style='width:200px'>Start Time</th><th style='width:200px'>End Time</th><th class=\"thfixed\">Description</th><th style='width:200px'>Record Time</th></tr><tbody>";

                  var index=-1;
                  $.each(result,function(i,o)
                  {
                      index=i;
                      tableValue+="<tr><td><a class =\"linkB\" target=\"_blank\" href=\"/FlowControl/RealTimeFlowControl/" + o.Id +"\" title=\"see the detail\">"+o.Source+"</a></td><td style='width:200px'>"+o.StartTime+"</td><td  style='width:200px'>"+o.EndTime+"</td><td>"+o.DescriptionEnglish+"</td><td  style='width:200px'>"+o.RecordTime+"</td></tr>";
                  });
                  tableValue+="</tbody></table>";
                  $('#viewModalDiv').css({"width":1200});
                  $('#viewContent').html(tableValue);
              }
          }
      });
    }

</script>







本博客所有文章如无特别注明均为原创。作者:cc复制或转载请以超链接形式注明转自 我的博客
原文地址《怎样用JS写一个下拉加载数据的table

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)