Angular分页排序

最新推荐文章于 2020-03-09 15:33:01 发布

Esengnet

最新推荐文章于 2020-03-09 15:33:01 发布

阅读量1.5k

点赞数

分类专栏： javascript(jquery | angualry)

本文链接：https://blog.csdn.net/Esengnet/article/details/22925897

版权

这个示例展示了如何在AngularJS应用中实现表格数据的分页和排序功能。通过点击表格头进行字段排序，使用自定义指令`pagediv`进行分页显示，每页显示20行数据，最大每行展示10个分页按钮。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html ng-app='app'>
<head>
<script src="../ajax/jquery-ui-1.9.0/js/jquery-1.8.2.js"></script>
<script src="angular.js"></script>
<style>
tr, td{
      cursor:pointer;
     text-align: left;
     padding-top: 2px !important;
     padding-right: 2px !important;
     padding-bottom: 2px !important;
     padding-left: 2px !important;
     vertical-align: top;
    }

    tr.title{
     color: #ffffff;
      border-bottom-color: #ffffff;
      font-weight: normal;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      background-color: rgb(153,173,194);
    }

    .odd {
      color: #000000;
      //border-bottom-color: #ffffff;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      background-color: rgb(219,228,237);
      }

    .even{
      color: #000000;
      //border-bottom-color: #ffffff;
      border-bottom-width: 5px;
      border-bottom-style: solid;
      background-color: rgb(191,204,217);
      }
a:link{
   color: #003399;
   background-color: transparent;
}
body{
   color: #000000;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   background-color: white;
}

pageDiv{
width: 100%;
height: 20px;
text-align: left;
line-height: 20px;
padding-right: 0px;
padding-left: 0px;
float: right;
background-image: none;
background-attachment: scroll;
background-repeat: repeat;
background-position-x: 0%;
background-position-y: 0%;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
background-color: rgb(219, 228, 238);
}

a, a:visited, a:hover{
text-decoration: none;
}

}
</style>

</head>

<body ng-controller="MainCtrl">

<table style="width:100%;" >
<tr >
    <td colSpan="4" style="width:100%;background-color: rgb(219, 228, 238);">
      <pagediv row-page="rowPage" page-Num-per-line='pageNumPerLine' total-row="datas.length" current-page="currentPage" ></pagediv>
    </td>
</tr>
<tr class="title">
    <td><a href="#" ng-click="orderProp = 'id'; reverse=!!!reverse">ID</a></td>
    <td><a href="#" ng-click="orderProp =

最低0.47元/天解锁文章

Esengnet

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular分页排序

tr, td{ cursor:pointer; text-align: left; padding-top: 2px !important; padding-right: 2px !important; padding-bottom: 2px !important; padding-left: 2px !important;
复制链接

扫一扫

专栏目录