项目源码服务 - 专业的Java毕业设计源码服务网       JAVA毕业设计源码定制,上CNITSTUDY.CN
【腾讯云】星星海SA2云服务器,1核2G首年99元起,高性价比首选
IT学习资源网2021-07-24
已验证

基于SSM+bootstrap实现用户信息分页显示C5017



摘要:
本源码框架使用当前流行的SSM框架,前端使用bootstrap实现列表展示及分页,MYsql数据库代码结构清晰,逻辑简单




详细描述:

本源码框架使用当前流行的SSM框架,前端使用bootstrap table实现列表展示及分页,MYsql数据库代码结构清晰,逻辑简单

核心代码

<script type="text/javascript">
            class BstpTable{
                constructor(obj) {
                    this.obj=obj;
                }
                inint(){
                     //---先销毁表格 ---
                     this.obj.bootstrapTable('destroy');  
                     //---初始化表格,动态从服务器加载数据--- 
                     this.obj.bootstrapTable({
                        //【发出请求的基础信息】
                        url: '<%=basePath%>student/selectAll',
                        method: 'post',
                        contentType: "application/x-www-form-urlencoded",
                        
                        //【其它设置】
                        locale:'zh-CN',//中文支持
                        pagination: true,//是否开启分页(*)
                        pageNumber:1,//初始化加载第一页,默认第一页
                        pageSize: 3,//每页的记录行数(*)
                        pageList: [2,3,4],//可供选择的每页的行数(*)
                        sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*)
                        showRefresh:true,//刷新按钮
                        search: true,//是否显示表格搜索,此搜索是客户端搜索,不会进服务端
                        
                        //【样式设置】
                        height: 300,//table的高度
                        //按需求设置不同的样式:5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
                        rowStyle: function (row, index) {
                            var style = "";
                            if (row.name=="老王") {style ='danger';}
                            return { classes: style }
                        },
                        
                        //【设置列】
                        columns: [
                         {field: 'id',title: 'id'}, 
                         {field: 'name',title: '姓名'},
                         {field: 'age',title: '年龄'},
                         {field: 'tool',title: '操作', align: 'center',
                            formatter:function(value,row,index){
                                var element = 
                                "<a class='edit' data-id='"+row.id +"'>编辑</a> "+ 
                                "<a class='delet' data-id='"+row.id +"'>删除</a> ";
                                return element;  
                            } 
                          }
                        ]
                    })
                 }
            }
            
            var bstpTable=new BstpTable($("table"));
            bstpTable.inint()
        </script>

 

 

下载源码

7*24小时在线
优质源码
请加微信联系
毕业设计
项目修改
项目定制开发