Struts2结合Bootstrap-Table分页的使用

Bootstrap-Table官网:http://bootstrap-table.wenzhixin.net.cn/

Bootstrap Table参数文档：http://bootstrap-table.wenzhixin.net.cn/documentation/


概述：

  最近需要用到分页设置，并且是在struts2下，所以话不多说了。使用Bootstrap-table必不可少的引用css，js文件，除此之外，需要准备显示的json数据源，并简单的配置一下。完成的效果如下



第一步：准备Json数据

1.struts2本身支持json的数据，添加struts2-json-plugin-2.3.24.jar，用于json数据的转化。(如果是用Servlet,用fastjson，Gson也可以)

2.Bean对象:创建一个Bean对象作为演示，将List<T>数据转化成Json数据，这里需要注意的是TimeStamp在转成Json时会变成：2017-08-10T12:12:20，有一个T，只要在对应的get方法添加一个格式化的注释@JSON(format
= "yyyy-MM-dd HH:mm:ss")就可以了。

packagecom.demo.domain;

import org.apache.struts2.json.annotations.JSON;

import java.sql.Timestamp;

public class
News {
    private intnid;
    private Stringntit;
    private Stringndes;
    private Stringnimg;
    private Stringnfrom;
    private Timestampndate;
    private Integernlooks;

    public News() {
    }

    publicNews(intnid,String
ntit,String ndes,String
nimg,String nfrom,Timestamp
ndate,Integer nlooks) {
        this.nid=
nid;
        this.ntit=
ntit;
        this.ndes=
ndes;
        this.nimg=
nimg;
        this.nfrom=
nfrom;
        this.ndate=
ndate;
        this.nlooks=
nlooks;
    }

    public intgetNid()
{
        returnnid;
    }

    public voidsetNid(intnid)
{
        this.nid=
nid;
    }

    publicStringgetNtit()
{
        returnntit;
    }

    public voidsetNtit(String
ntit) {
        this.ntit=
ntit;
    }

    publicStringgetNdes()
{
        returnndes;
    }

    public voidsetNdes(String
ndes) {
        this.ndes=
ndes;
    }

    publicStringgetNimg()
{
        returnnimg;
    }

    public voidsetNimg(String
nimg) {
        this.nimg=
nimg;
    }

    publicStringgetNfrom()
{
        returnnfrom;
    }

    public voidsetNfrom(String
nfrom) {
        this.nfrom=
nfrom;
    }

    @JSON(format="yyyy-MM-dd
HH:mm:ss")
    publicTimestampgetNdate()
{
        returnndate;
    }
    public voidsetNdate(Timestamp
ndate) {
        this.ndate=
ndate;
    }

    publicIntegergetNlooks()
{
        returnnlooks;
    }

    public voidsetNlooks(Integer
nlooks) {
        this.nlooks=
nlooks;
    }

    @Override
    public booleanequals(Object
o) {
        if(this==
o) return true;
        if (o ==null||
getClass() != o.getClass())return false;

        News btlNews = (News) o;

        if (nid!=
btlNews.nid)return false;
        if (ntit!=null?
!ntit.equals(btlNews.ntit)
: btlNews.ntit
!= null)return false;
        if (ndes!=null?
!ndes.equals(btlNews.ndes)
: btlNews.ndes
!= null)return false;
        if (nimg!=null?
!nimg.equals(btlNews.nimg)
: btlNews.nimg
!= null)return false;
        if (nfrom!=null?
!nfrom.equals(btlNews.nfrom)
: btlNews.nfrom
!= null)return false;
        if (ndate!=null?
!ndate.equals(btlNews.ndate)
: btlNews.ndate
!= null)return false;
        if (nlooks!=null?
!nlooks.equals(btlNews.nlooks)
: btlNews.nlooks
!= null)return false;

        return true;
    }

    @Override
    public inthashCode()
{
        intresult =nid;
        result =31*
result + (ntit!=null?ntit.hashCode()
:0);
        result =31*
result + (ndes!=null?ndes.hashCode()
:0);
        result =31*
result + (nimg!=null?nimg.hashCode()
:0);
        result =31*
result + (nfrom!=null?nfrom.hashCode()
:0);
        result =31*
result + (ndate!=null?ndate.hashCode()
:0);
        result =31*
result + (nlooks!=null?nlooks.hashCode()
:0);
        return
result;
    }
}
 

 第二步：编写对应的Action

NewsAction: 这里将getNewsListFromDB()模拟从数据库获取到数据，其他有注释看看就知道了，在Struts2配置的root对应的是需要转Json数据的变量名（要有对应的get方法）。

packagecom.demo.action;

import com.demo.domain.News;
import com.opensymphony.xwork2.ActionSupport;

import java.sql.Timestamp;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

public class
NewsAction extendsActionSupport {
    //需转换输出的Json数据
    privateList<News>newsList;
    //要转换输出数据对应的get方法
    publicList<News>getNewsList()
{
        returnnewsList;
    }

    publicStringnewsList()
{
        newsList=getNewsListFromDB();
        System.out.println(newsList.size());
        return
SUCCESS;
    }

    //直接在这里模仿从数据库获取到了List<News>的信息
    privateList<News>getNewsListFromDB(){
        List<News> mnewsList=newArrayList<>();
        Timestamp timestamp=newTimestamp(newDate().getTime());
        for (inti
= 0;i <100;i++)
{
            News  news=newNews(i,"新闻"+i,"新闻描述"+i,"新闻图片"+i,"新华社"+i,timestamp,i);
            mnewsList.add(news);
        }
        System.out.println(mnewsList.size());
        return
mnewsList;
    }
}
 

第三步：配置Struts。使用的struts-json，extend不再为struts-default，改为json-default,另外result要加一个param，将要转为Json的数据配置一下。

Struts.xml

<struts>
    <package
name="json"namespace="/"extends="json-default">
        <action
name="newsList"class="com.demo.action.NewsAction"method="newsList">
            <result
name="success"type="json">
                <paramname="root">newsList</param>
            </result>
        </action>
    </package>
</struts>
这里如果 json-default是红色的，那需要自己去添加一次facets,我用的是idea，所以贴一下图出来。



访问http://localhost:8080/BT/newsList,可以显示json格式数据。(当然，web.xml需要配置好struts2的filter信息)，网址输入后访问结果页如下：








第四步：jsp页面展示。引入对应的css、js文件，我这里采用的是js方式来设置，比较灵活。url：这里是Json访问数据的Url。那个网址访问后的数据都是json的。如下面的图所示，pagination:设置是否分页，columns里面的field是对应Json数据里面的key，title是该列的标题名；其他的属性配置比如数据刷新，搜索等配置官网或者其他都有的，就不说了。

官网有提供另外一种方式，直接在<table></table>标签里面设置的，会常用的就行了，这个自己去官网了解一下应该就可以了。

Jsp:

<%@pagecontentType="text/html;charset=UTF-8"
language="java" %>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"content="ie=edge,chrome=1">
    <meta name="viewport"content="width=device-width,
initial-scale=1.0">
    <title>Struts2&Bootstrap-Table</title>
    <link rel="stylesheet"href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet"href="bootstrap/css/bootstrap-table.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap/js/bootstrap-table.js"></script>
    <script src="bootstrap/js/bootstrap-table-zh-CN.min.js"></script>

    <script type="text/javascript">
        $(function()
{
            $('#bsTable').bootstrapTable({
                url:"http://localhost:8080/BT/newsList",
                dataType:"json",/*数据类型*/
                pagination:true,/*是否分页*/
                columns: [
                    {
                        title:'序号',/**/
                        field:'nid',/*Json数据对应的字段*/
                        align:'center'
                    },
                    {
                        title:'新闻标题',
                        field:'ntit',
                        align:'center'
                    },
                    {
                        title:'新闻内容',
                        field:'ndes',
                        align:'center'
                    },
                    {
                        title:'新闻来源',
                        field:'nfrom',
                        align:'center'
                    },
                    {
                        title:'发布日期',
                        field:'ndate',
                        align:'center'
                    },
                    {
                        title:'浏览量',
                        field:'nlooks',
                        align:'center'
                    },
                    {
                        title:'操作',
                        field:'nid',
                        align:'center',
                        formatter:function(value,row,index)
{
                            varl ='<a
href="test.jsp?nid=\''+ row.nid +
'\'">浏览</a>
';
                            vare ='<a
href="test.jsp?nid=\''+ row.nid +
'\'">编辑</a>
';
                            vard ='<a
href="test.jsp?nid=\''+ row.nid +
'\'">删除</a>';
                            returnl + e + d;
                        }
                    }
                ]
            });
        });
    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <table
id="bsTable"class="col-lg-12"></table>
    </div>
</div>
</body>
</html>
 

点击对应的操作的话，拼接成的url是http://localhost:8080/BT/test.jsp?nid=%271%27，所以还需要把单引号去掉，获取到对应的id，我是下面这个方式获取的；如果不喜欢感觉添加对应的onclick事件来处理也可以。

String str="'520'";
String numstr=str.replace("'","");
int num=Integer.parseInt(numstr);
System.out.println(num);
 

Web.xml:

<?xml version="1.0"encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"          version="3.1">
    <display-name>BootstrapTableDemo</display-name>
    <filter>
        <filter-name>struts</filter-name>
        <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>struts</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>
 至此结束