`

如何让HTML5的表格支持后台排序与分页

阅读更多

TWaver HTML5发布已有一段时间,使用的客户也是逐渐增加,于是我也迫不及待地申请了一个试用版来写一个小网页,最近正在写到数据查询,表格显示的功能。表格组件在HTML5中是提供的,查看TWaver提供的Demo,表格的使用还是比较多的,于是参考了其中的一个Demo,新建一个表格,并给表格赋值。很快一张表格就生成了。



但是想想,如果数据库中有几千甚至几万条数据,一下子显示出来也是不现实的,立马就想要了分页。查看TWaver的API,并没有发现表格中提供了分页的功能。算了,还是自己来扩展,想想TWaver Java中分页的功能,HTML5实现起来应该也不算太难,我们需要定义一个PagedTablePane,panel中包含表格和分页栏,分页栏参考了TWaver Java的那种:



仔细看看上面的分页条,其实也不是那么复杂,几个分页按钮加上分页的信息,于是很快就模仿了一个类似的分页栏,先上图:


界面实现起来还是比较容易的,主要的是按钮的操作和分页信息的显示,我们需要定义几个变量:currentPage(当前页)、countPerPage(每页的条数)、pageCount(页数)、count(总数),定义了这几个变量就可以将上图中分页的信息表示出来了。

另外需要注意,分页按钮上也需要做一些判断,比如当前已经是第一页了,那么“首页”和“上一页”的按钮就应该显示灰色,不可操作的状态;同理如果当前是最后一页,那么后面两个按钮也需要呈不可操作状态,我们来看下相关代码:

if(this.pageCount < 2) {
            this.btnFirstPage.disabled = true;
            this.btnPreviousPage.disabled = true;
            this.btnNextPage.disabled = true;
            this.btnLastPage.disabled = true;
        } else {
            this.btnFirstPage.disabled = false;
            this.btnPreviousPage.disabled = false;
            this.btnNextPage.disabled = false;
            this.btnLastPage.disabled = false;
            if(this.currentPage == 0) {
                this.btnFirstPage.disabled = true;
                this.btnPreviousPage.disabled = true;
            }
            if(this.currentPage == this.pageCount - 1) {
                this.btnNextPage.disabled = true;
                this.btnLastPage.disabled = true;
            }
        }

按钮除了需要判断显示状态之外,还需要加鼠标点击的监听,这里我们需要后台分页,因此,每次点击按钮时,都需要调用后台的方法查询出相应的数据,这样也可以减少前台一次加载大量数据的压力。

this.btnFirstPage = util.addButton(toolbar, '<<', function () {
        self.currentPage = 0;
        self.search();
    });
    this.btnPreviousPage = util.addButton(toolbar, '<', function () {
        self.currentPage --;
        self.search();
    });
    this.btnNextPage = util.addButton(toolbar, '>', function () {
        self.currentPage ++;
        self.search();
    });
    this.btnLastPage = util.addButton(toolbar, '>>', function () {
        self.currentPage = self.pageCount -1;
        self.search();
    });

另外下拉条也需要加交互事件:

cmbCountPerPage.onchange = function () {
        var value = parseFloat(cmbCountPerPage.value);
        self.countPerPage = value;
        self.search();
    };


上面代码中的search都是调用后台的方法,这里就不再给出了。至此,分页的功能就差不多了,加上分页后的效果:

 

细心的朋友还会看到上面的表头上有些列是可点的,有些是不可点击的。我在这里加上了后台排序的功能,如果这一列可以排序就为可点击状态,反之则为不可点击状态。

HTML5中的表格默认是可以进行排序的,不过这种排序也是在当前页进行排序,还不是真正意义上的后台排序,其实分页后也只有当前页的数据在databox中,后面页的数据都需要通过实时查找才能获取放置到databox中。因此点击排序按钮时我们需要将TWaver默认的处理方式给屏蔽掉,加上自己的处理就可以了,具体实现如下:

先重写table上的getCurrentSortFunction:

 

getCurrentSortFunction: function () {
        return this.getSortFunction();
    }

 

然后在onColumnSorted方法中进行自己的业务处理:

this.table.onColumnSorted = function (column) {
  self.currentPage = 0;
  if (column) {
     self.dataPane._sortBy = column.getClient('sortProperty');
     self.dataPane._orderAsc = column.getSortDirection() === 'asc';
  } else {
     self.dataPane._sortBy = null;
  }
  self.search();
 };

这里的sortBy和orderAsc是自己定义的两个变量,在search方法中会调用此变量,将其传入后台进行排序。最后,给出完整的PagedTablePane供大家参考:

 

var PagedTablePane = function (dataPane) {
    PagedTablePane.superClass.constructor.call(this);
    this.dataPane = dataPane;
    var toolbar = document.createElement('div');
    this.setCenter(new twaver.controls.TablePane(dataPane.table));
    this.setTop(toolbar);
    this.setTopHeight(25);
    this.countPerPage = 20;
    var self = this;
    var isStorageSupport = typeof(Storage) !== "undefined";
 if(isStorageSupport) {
        var storageName = dataPane.getPageNumberStorageName();
        if(localStorage.getItem(storageName)){
            self.countPerPage = parseFloat(localStorage.getItem(storageName));
        }
 }
    var cmbCountPerPage = document.createElement('select');
    var items = ['20', '50', '100', '500', '1000'];
    for(var i=0,item; i<items.length; i++) {
        item = items[i];
        var option = document.createElement('option');
        option.appendChild(document.createTextNode(item));
        option.setAttribute('value', item);
        cmbCountPerPage.appendChild(option);
    }
    cmbCountPerPage.onchange = function () {
        var value = parseFloat(cmbCountPerPage.value);
        self.countPerPage = value;
        if(isStorageSupport) {
            var storageName = dataPane.getPageNumberStorageName();
            localStorage.setItem(storageName,value);
        }
        self.search();
    };
    cmbCountPerPage.value = this.countPerPage;
    toolbar.appendChild(cmbCountPerPage);
   
    this.btnFirstPage = util.addButton(toolbar, '<<', function () {
        self.currentPage = 0;
        self.search();
    });
    this.btnPreviousPage = util.addButton(toolbar, '<', function () {
        self.currentPage --;
        self.search();
    });
    this.btnNextPage = util.addButton(toolbar, '>', function () {
        self.currentPage ++;
        self.search();
    });
    this.btnLastPage = util.addButton(toolbar, '>>', function () {
        self.currentPage = self.pageCount -1;
        self.search();
    });
    this.label = document.createElement('label');
    toolbar.appendChild(this.label);
   
    this.table = dataPane.table;
    this.currentPage = 0;
   
    this.table.onColumnSorted = function (column) {
  self.currentPage = 0;
  if (column) {
     self.dataPane._sortBy = column.getClient('sortProperty');
     self.dataPane._orderAsc = column.getSortDirection() === 'asc';
  } else {
     self.dataPane._sortBy = null;
  }
  self.search();
 };
};

twaver.Util.ext('PagedTablePane', twaver.controls.BorderPane, {
    search: function () {
       util.invoke(this, this.handleSearch, {
             moduleName:this.dataPane._moduleName,
             method: util.getCountMethod(this.dataPane._method),
             params: this.dataPane.getParams(),
             paramTypes:this.dataPane._paramType
        });
    },
    handleSearch: function (count) {
        this.jsonObject = JSON.parse(count);
        this.count = this.jsonObject[0];
        this.pageCount = Math.floor(this.count/this.countPerPage);
        if(this.count % this.countPerPage) {
            this.pageCount ++;
        }
        if(this.currentPage >= this.pageCount) {
            this.currentPage = this.pageCount -1;
        }
        this.label.innerHTML = jQuery.i18n.prop('paged.page',this.count,this.currentPage + 1,this.pageCount);
        if(this.pageCount < 2) {
            this.btnFirstPage.disabled = true;
            this.btnPreviousPage.disabled = true;
            this.btnNextPage.disabled = true;
            this.btnLastPage.disabled = true;
        } else {
            this.btnFirstPage.disabled = false;
            this.btnPreviousPage.disabled = false;
            this.btnNextPage.disabled = false;
            this.btnLastPage.disabled = false;
            if(this.currentPage == 0) {
                this.btnFirstPage.disabled = true;
                this.btnPreviousPage.disabled = true;
            }
            if(this.currentPage == this.pageCount - 1) {
                this.btnNextPage.disabled = true;
                this.btnLastPage.disabled = true;
            }
        }
        this.dataPane.initData();
    }
});
 
分享到:
评论

相关推荐

    jquery 实现排序和分页

    分页通常与后台服务配合,每次切换页码时,通过 AJAX 发送请求获取对应页的数据,并更新表格内容。例如,使用 `$.ajax`: ```javascript function loadPage(page) { $.ajax({ url: 'data.php?page=' + page, /...

    HTML5 的数据列表 DEMO,支持排序/分页/选择

    5. **操作**:除了基本的展示,这个表格列表可能还包含了其他操作,如编辑、删除或导出数据等,这些都是通过按钮或链接触发AJAX请求,与服务器进行交互。 6. **响应式设计**:作为Bootstrap的一部分,这个表格列表...

    table排序分页

    1. 前端实现:JavaScript库如jQuery、Vue.js、React.js等提供了丰富的表格组件,如DataTables、Element UI、Ant Design等,它们内置了排序和分页功能,开发者只需配置相应的参数即可。 2. 后端实现:服务器端进行...

    extjs表格(表格后台数据读,分页),树(后台数据读取,复选框联动)的基本操作示例

    在这个示例中,我们关注的是ExtJS中的两个关键组件:GridPanel和TreePanel,以及它们如何与后台数据进行交互,实现分页和复选框联动功能。 1. **GridPanel**:GridPanel是ExtJS中用于展示表格数据的组件,它提供了...

    表格可按列筛选排序的分页 JS+CSS+DIV

    总的来说,“表格可按列筛选排序的分页 JS+CSS+DIV”是一个结合了前端技术的实用工具,实现了动态交互的表格功能,为网站后台的数据管理提供了便利。通过合理运用 JavaScript、CSS 和 HTML,开发者可以创建出功能...

    displaytag 一个后台管理的分页组件

    DisplayTag 提供了丰富的定制选项,使得表格的格式化、排序、分页以及国际化等功能变得轻而易举。 Displaytag 的核心特性包括: 1. **表格呈现**:DisplayTag 可以轻松地将数据集(如List、Map或数组)渲染成HTML...

    JS实现table表格数据排序功能(可支持动态数据+分页效果)

    这个场景中,我们讨论的是如何用JavaScript实现一个表格的动态数据排序,并且支持分页,主要涉及到以下知识点: 1. **HTML表格**: HTML中的`&lt;table&gt;`元素用于创建表格,`&lt;tr&gt;`表示表格行,`&lt;td&gt;`表示表格单元格。在...

    jQuery分页排序插件.zip

    1. 数据表格:在电商网站的产品列表、报表应用或后台管理系统中,分页排序插件常用于展示商品信息、销售数据等,使用户能高效地查找和比较信息。 2. 列表视图:对于博客文章、论坛帖子等列表形式的内容,分页排序...

    Dojo 自定义后台排序

    总之,“Dojo 自定义后台排序”是一个涵盖前端与后端交互、数据存储、排序逻辑实现等多方面技术的话题。通过掌握这些知识,开发者能够构建更加灵活、高效的Web应用,满足各种复杂的排序需求。在实际项目中,可以根据...

    display table 外部分页 支持当前页排序

    "display table 外部分页 支持当前页排序"这个主题聚焦于如何在网页上有效地显示大量表格数据,同时提供分页功能和当前页面的排序能力。这种技术常用于Web应用程序,如后台管理系统、数据分析平台等,旨在提升用户...

    HTML5 后台框架

    3. **数据表格**:支持排序、筛选、分页和编辑功能,与Ajax集成实现数据的动态加载。 4. **图表**:利用如Chart.js或Highcharts等库生成统计图表,用于数据可视化。 5. **表单组件**:包括输入框、下拉菜单、开关、...

    HTML5完整版后台模板 拥有简洁优雅的 风格界面 76 个模板页面,包括图表、表格、地图、消息中心、监控面板

    2. **表格**:优化的表格设计支持数据排序、筛选和分页,同时兼容各种数据格式,便于信息的管理和检索。通过Ajax动态加载和编辑功能,使数据操作更加灵活。 3. **地图**:集成Google Maps或其他地图API,用于展示...

    vue element table 表格请求后台排序的方法

    以下是一个关于如何在Vue Element UI表格中实现后台排序的详细步骤: 1. 首先,我们需要在表格组件上设置`sortable`属性为`custom`,这样当用户点击表头时,排序请求将不会立即在前端执行,而是等待`sort-change`...

    一款灵活的jQuery插件支持排序、分页.zip

    这款名为"一款灵活的jQuery插件支持排序、分页.zip"的压缩包文件,主要包含了一个前端代码资源,特别适用于那些需要在网页中实现数据排序和分页功能的项目。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档...

    超级实用ajax表格带搜索分页.zip

    jQuery DataTables是一个强大的JavaScript库,用于将HTML表格转化为功能丰富的数据展示工具,支持排序、过滤、分页等高级功能。ColumnFilter可能是其提供的一个扩展,专门用于列过滤,使得用户能快速定位和查找特定...

    HTML5后台管理模板是一款高级的HTML5响应式管理模板。.rar

    3. 数据管理:表格展示数据,支持排序、过滤、分页,以及添加、编辑和删除记录。 4. 设置和配置:允许管理员调整系统参数和用户权限。 5. 图标和按钮:使用矢量图形(SVG)和图标字体库(如Font Awesome),保证图标...

    9种jquery纯页面分页排序

    - `JQuery排序分页a`:这是一个结合了排序和分页功能的插件,用户可以对数据显示进行个性化定制,如每页显示条目数、跳转页码等。 - `jqueryPaginga`:这个插件提供简洁的分页样式和易于使用的API,支持自定义样式...

    html5网站后台源码

    2. **表格展示(table.html)**:HTML5提供了更强大的表格元素,如`&lt;thead&gt;`, `&lt;tbody&gt;`, `&lt;tfoot&gt;`等,可以创建结构清晰、可排序甚至带有分页的表格,便于后台数据的展示和管理。 3. **首页(index.html)**:作为...

Global site tag (gtag.js) - Google Analytics