• jquery----分页插件


    前端分页插件twbsPagination的使用

    1.引入jquery与twbsPagination

    2.引入div,展示分页效果

                    <div style="text-align: right;">
                        <ul id="pagination" class="pagination"></ul>
                    </div>

    3.script中引入函数

            //分页
            $('#pagination-demo').twbsPagination({
                //total总记录数,就是多少条数据  pages总页数
                totalPages: ${page.total},
                visiblePages: 5,
                first:'首页',
                last:'末页',
                prev:'上一页',
                next:'下一页',
                href:"?p={{number}}"
            });
    

      示例

        <!--分页-->
        $("#pagination").twbsPagination({
            totalPages:[[${pageResult.getTotalPage()}]],
            visiblePages: 5, //最多显示5页
            startPage:[[${pageResult.getCurrentPage()}]],
            onPageClick: function (event, page) { 
                $("#currentPage").val(page); //修改form表单中的中查询的页数的值
                $("#searchForm").submit();   //利用form表单提交数据
            }
        })
    

    可能需要currentPage

                totalPages: [[${pageResult.totalPage}]],
                currentPage: [[${pageResult.currentPage}]],
                startPage:[[${pageResult.currentPage}]],
    

      

    如何修改表中的数据

      方式1:如果需要修改的数据在图中没有完全显示,那么我们可以通过点击修改按钮在进行发送一个url请求将所有的数据返回给前端。通过获得的数据直接修改模态框中的值,在显示模态框。

      方式2:如果需要修改的数据已经在图中显示完全,那么我们可以通过获取列表中的数据来修改模态框中的值,在显示模态框。

      如果我们不使用模态对话框,我们可以将表格中的数据在点击修改按钮的时候,动态变成input输入框。

      如果需要获取列表中的数据,需要通过选择器来查找元素比较麻烦,一个简单的办法是直接生成列表的时候,直接将一列的数据封装成json放在修改这个标签中。

    <a href="javascript:void(-1);" class="edit_Btn" data-jsonstr='' th:data-jsonstr="${vo.getJsonString()}">修改</a>
    

      

    $(".edit_Btn").click(function () {
                    var json = $(this).data("jsonstr");
                    $("#systemDictionaryId").val(json.id);
                    $("#title").val(json.title);
                    $("#sn").val(json.sn);
                    $("#systemDictionaryModal").modal("show");
                });
    

      

  • 相关阅读:
    mybatis plus 执行sql
    springboot 打印 mybatisplus 的sql
    easyexcel 简单使用
    springboot ehcache
    easyexcel 时间转换
    springboot stopwatch
    c# 开机自动启动
    sqlHelper
    DirectX录音
    c# 发邮件
  • 原文地址:https://www.cnblogs.com/yanxiaoge/p/11690076.html
Copyright © 2020-2023  润新知