ext分页,后台如何处理?

我是根据查询条件从数据库中取出满足条件的数据,保存到list中,用了json-plugin插件,所以直接把从数据返回的List类型数据赋值给List类型的参数items直接传到前台gridpanel中的root接收。我现在想实现的是根据查询的结果进行分页显示,如图,我得到12条结果,我现在想每页显示5条,我现在不知道怎样根据start和limit参数来处理。在网上搜了很多,始终搞不清楚原理。

[color=red][size=medium]这里是grid定义[/size][/color]
[code="java"]
//定义数据集对象
var store = new Ext.data.Store({//配置分组数据集
baseParams : {
infoLinkman :''
},
reader: new Ext.data.JsonReader({
totalRecords : "results",
totalProperty: "results",
root : "items",
fields : [
{name: 'id'},
{name: 'infoType'},
{name: 'infoTitle'},
{name: 'infoContent'},
{name: 'infoLinkman'},
{name: 'infoPhone'},
{name: 'infoEmail'},
{name: 'infoDate'},
{name: 'infoState'},
{name: 'infoPayfor'}
]
}),
proxy : new Ext.data.HttpProxy({
url : 'ShowList.action'
})
});
store.load({
params : {
start : 0,
limit : 5
}
});

var sm = new Ext.grid.CheckboxSelectionModel();

var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), sm,
                    {header: "ID", width: 100, dataIndex: 'id', sortable: true},
        {header: "信息类别", width: 100, dataIndex: 'infoType', sortable: true},
        {header: "信息标题", width: 100, dataIndex: 'infoTitle', sortable: true},
        {header: "信息内容", width: 100, dataIndex: 'infoContent', sortable: true},
        {header: "联系人", width: 100, dataIndex: 'infoLinkman', sortable: true},
        {header: "联系电话", width: 100, dataIndex: 'infoPhone', sortable: true},
        {header: "E-mail地址", width: 100, dataIndex: 'infoEmail', sortable: true},
        {header: "发布时间", width: 130, dataIndex: 'infoDate', sortable: true},
        {header: "审核状态", width: 100, dataIndex: 'infoState', sortable: true},
        {header: "付费状态", width: 100, dataIndex: 'infoPayfor', sortable: true}]);


//创建Grid表格组件
var grid = new Ext.grid.GridPanel({
    title : '列表',
    applyTo : 'grid-div',
    width:1200,
    height:400,
    frame:true,
    store : store,
    cm : cm,
    sm : sm,
    tbar : [{
            xtype : 'tbtext',
            text : '联系人查询'
        }, {
            xtype : 'textfield',
            id : 'infoLinkman',
            emptyText : '联系人',
            width : 100
        }, {
            xtype : 'button',
            text : '查询',
            handler:find
        }, '-', {
                  xtype : 'button',
              text : '添加',
              handler:add

        }, '-', {
              xtype : 'button',
              text : '编辑',
              handler:update
        }, '-', {
               xtype : 'button',
               text : '删除',
               handler:remove
        }],
        bbar : new Ext.PagingToolbar({//分页工具栏
            store : store,
            pageSize : 5,
            displayInfo : true,
            displayMsg : '第 {0} 条到 {1} 条,一共 {2} 条',
            emptyMsg : "没有记录"
        })
});

[/code]

[color=red][size=medium]这里是查询函数[/size][/color]
[code="java"]
function find() {
var store = new Ext.data.Store({//配置分组数据集
baseParams : {

                    infoLinkman : Ext.getCmp('infoLinkman').getValue()
                },

    reader: new Ext.data.JsonReader({
        totalRecords : "results",
        root : "items",
        fields : [
            {name: 'id'},
            {name: 'infoType'},
            {name: 'infoTitle'},
            {name: 'infoContent'},
            {name: 'infoLinkman'},
            {name: 'infoPhone'},
            {name: 'infoEmail'},
            {name: 'infoDate'},
            {name: 'infoState'},
            {name: 'infoPayfor'}
        ]
    }),
    proxy : new Ext.data.HttpProxy({
        url : 'ShowList.action'
    })
});
    store.load({
            params : {
                start : 0,
                limit : 5
            }
        });
    grid.reconfigure(store, cm);
}

[/code]

[color=red][size=medium]这里是action[/size][/color]
[code="java"]
public class ShowListAction extends ActionSupport {

private String infoLinkman;
private long results;
private List items;
String start;
String limit;


public String execute() throws Exception{

    this.results = 20;
//  int top1=Integer.parseInt(start); 
//  int top2=Integer.parseInt(limit);

    Object[] params={infoLinkman};
    String sql="SELECT * FROM tb_info WHERE (info_linkman=?) ORDER BY info_date ASC";

    OpDB myOp=new OpDB();

    System.out.println(infoLinkman);
    items=myOp.OpListShow(sql, params);         

    return SUCCESS;
}

}

[/code]
[b]问题补充:[/b]
若后台是sql server 2000 sql语句该怎么写呢?好像用mysql的话这个问题比较好解决。还有我那个查询条件 联系人的参数我通过查询按钮在find方法里传过去,但我要点击下一页按钮的话文本框里的这个参数好像就传不过去了,每次传递的参数只是limit和start,这个查询条件参数带不过去。这个参数该怎么传递呢,在更新页码的时候?
[b]问题补充:[/b]
现在就不处理吧,但是他也没有自动分页啊,12条数据他是全部显示出来了啊
[b]问题补充:[/b]
[quote]来进行分页,不过要用两条select语句联合起来用[/quote]
比如总共12条数据,去6-10条,sql怎么写呢?
[b]问题补充:[/b]
[color=red][size=medium]
现在的问题是,我想根据查询条件得到结果,并将符合条件的结果条数动态的传给results。我在第一次显示gridpanel时它就调用了action,因为没有参数联系人参数传入,执行sql语句后满足条件的是0条,这时results值就被赋值0,因此页数就只有一页。此时我再点击查询按钮查询,可以得到第一页的前五条数据,但下面的分页按钮只有一页,无法点击下一页。

第二个问题,即使现在可以点击下一页,那又怎样才能将我的查询条件这个参数带过去呢,不然返回的还是零条。

第三个问题,即使现在点击第二页按钮时,可以返回第6-10条数据,但根据下面的摄sql语句,由于是用id进行分页的,而id是没有重复的,查询操作会直接前5条记录去除,从数据库的第6条开始查询满足条件的记录,而这必然会使第二页得到的内容会与第一页的内容有可能重复(若前5页没有符合条件的内容的话,第1页和第2页内容就会完全一样。)

[color=brown][/color]

[/size][size=small]谢谢各位热心解答,问题讲得很啰嗦,不知道讲清楚没有,我基础不太好,这个问题搞了好久也没弄出个所以然来,实在不知道怎么办了。[/size][/color]

[code="java"]
public String execute() throws Exception{

        int top1=Integer.parseInt(start); 
        int top2=Integer.parseInt(limit);

    Object[] params={infoLinkman};

// String sql="SELECT * FROM tb_info WHERE (info_linkman=?) ORDER BY info_date ASC";

    String sql = "select  top "+top2+" * from tb_info where (info_linkman=?)and (id not in (select top "+top1+" id from tb_info order by id asc )) order by id asc";   

// String sql = "select top 5 * from tb_info where (info_linkman=?)and (id not in (select top 10 id from tb_info order by id asc )) order by id asc";

    OpDB myOp=new OpDB();
    items=myOp.OpListShow(sql, params); 

    String sql2="select count(*) count from tb_info where (info_linkman=?)";   
    results = myOp.getUserCount(sql2, params);
//  results=11;


    System.out.println("符合条件记录条数:"+results);
    System.out.println(infoLinkman);




    return SUCCESS;
}

[/code]

[b]问题补充:[/b]
加上那段代码后提示[color=red]Ext.getCmp("infoLinkman") is undefined
[/color]
其实就是想根据查询条件得到结果集合,但是如果数据量很大,就需要分页,现在这个分页很难实现吗,这个应该也是很常见的需求吧
[b]问题补充:[/b]
[size=medium][color=red]奇怪,上次补充的问题不见了。前段时间网络一直不好。我把load和beforeload函数放到gridpanel定义后结果就正常了,不报错。 现在我把results定死,赋值为11,这样初始分页栏会显示有3页,第一页显示根据查询条件得到的5个结果,点击第二页时,从后台看,action可以得到查询参数并返回5条结果,但是gridpanel里的数据并没有更新,现在的问题是如何让gridpanel根据每次返回的数据动态更新表格。[/color][/size]
[b]问题补充:[/b]
[color=red][size=small]第一次默认返回数据为:{"[/[/size]color]infoLinkman":"","infoType":null,"items":[],"limit":"5","results":11,"start":"0"}
[color=red][size=small]第二次根据查询数据得到数据为:{"[/[/size]color]infoLinkman":"鑺宠姵","infoType":null,"items":[{"[color=red]id[/color]":114,"infoContent":"姹傝喘淇℃伅鍐呭","infoDate":"2007-12-26

11:47:46","infoEmail":"888@89*.com","infoLinkman":"鑺宠姵","infoPayfor":"1","infoPhone":"13255******","infoState"

:"1","infoTitle":"姹傝喘淇℃伅鏍囬","infoType":4},{"id":115,"infoContent":"鎷涘晢寮曡祫鍐呭","infoDate":"2007-12-26

11:51:54","infoEmail":"888@89*.com","infoLinkman":"鑺宠姵","infoPayfor":"1","infoPhone":"13255******","infoState"

:"1","infoTitle":"鎷涘晢寮曡祫鏍囬","infoType":5},{"id":116,"infoContent":"鍏瘬淇℃伅鍐呭","infoDate":"2007-12-26

11:52:36","infoEmail":"888@89*.com","infoLinkman":"鑺宠姵","infoPayfor":"1","infoPhone":"13255******","infoState"

:"1","infoTitle":"鍏瘬淇℃伅鏍囬","infoType":6},{"id":117,"infoContent":"姹傝亴淇℃伅鍐呭","infoDate":"2007-12-26

11:53:03","infoEmail":"888@89*.com","infoLinkman":"鑺宠姵","infoPayfor":"1","infoPhone":"13255******","infoState"

:"1","infoTitle":"姹傝亴淇℃伅鏍囬","infoType":7},{"id":118,"infoContent":"瀹舵暀淇℃伅鍐呭","infoDate":"2007-12-26

11:53:40","infoEmail":"888@89*.com","infoLinkman":"鑺宠姵","infoPayfor":"1","infoPhone":"13255******","infoState"

:"1","infoTitle":"瀹舵暀淇℃伅鏍囬","infoType":8}],"limit":"5","results":11,"start":"0"}
[size=small][color=red]点击第二页后得到数据为:[/color][/size]
{"infoLinkman":"鑺宠姵","infoType":null,"items":[{"[color=red]id[/color]":116,"infoContent":"鍏瘬淇℃伅鍐呭","infoDate":"2007-12-26

11:52:36","infoEmail":"888@89*.com","infoLinkman":"鑺宠姵","infoPayfor":"1","infoPhone":"13255******","infoState"

:"1","infoTitle":"鍏瘬淇℃伅鏍囬","infoType":6},{"id":117,"infoContent":"姹傝亴淇℃伅鍐呭","infoDate":"2007-12-26

11:53:03","infoEmail":"888@89*.com","infoLinkman":"鑺宠姵","infoPayfor":"1","infoPhone":"13255******","infoState"

:"1","infoTitle":"姹傝亴淇℃伅鏍囬","infoType":7},{"id":118,"infoContent":"瀹舵暀淇℃伅鍐呭","infoDate":"2007-12-26

11:53:40","infoEmail":"888@89*.com","infoLinkman":"鑺宠姵","infoPayfor":"1","infoPhone":"13255******","infoState"

:"1","infoTitle":"瀹舵暀淇℃伅鏍囬","infoType":8},{"id":119,"infoContent":"杞﹁締淇℃伅鍐呭","infoDate":"2007-12-26

11:54:05","infoEmail":"888@89*.com","infoLinkman":"鑺宠姵","infoPayfor":"1","infoPhone":"13255******","infoState"

:"1","infoTitle":"杞﹁締淇℃伅鏍囬","infoType":9},{"id":120,"infoContent":"鍑哄敭淇℃伅鍐呭","infoDate":"2007-12-26

11:54:41","infoEmail":"888@89*.com","infoLinkman":"鑺宠姵","infoPayfor":"1","infoPhone":"13255******","infoState"

:"1","infoTitle":"鍑哄敭淇℃伅鏍囬","infoType":10}],"limit":"5","results":11,"start":"5"}

[size=small][color=red]grid定义:[/color][/size]
[code="java"]var grid = new Ext.grid.GridPanel({
title : '列表',
applyTo : 'grid-div',
width:1200,
height:500,
frame:true,
store : store,
cm : cm,
sm : sm,
tbar : [{
xtype : 'tbtext',
text : '联系人查询'
}, {
xtype : 'textfield',
id : 'infoLinkman',
emptyText : '联系人',
width : 100
}, {
xtype : 'button',
text : '查询',
handler:find
}, '-', {
xtype : 'button',
text : '添加',
handler:add

                    }, '-', {
                        xtype : 'button',
                        text : '编辑',
                        handler:update
                    }, '-', {
                        xtype : 'button',
                        text : '删除',
                        handler:remove
                    }],
                bbar : new Ext.PagingToolbar({//分页工具栏
                        store : store,
                        pageSize : 5,
                        displayInfo : true,
                        displayMsg : '第 {0} 条到 {1} 条,一共 {2} 条',
                        emptyMsg : "没有记录"
                })
});


store.on('beforeload', function() {    //Ext.data.JsonStore读入数据之前的事件,让store在读入数据之前设置参数。   
this.baseParams = {   
infoLinkman : Ext.getCmp('infoLinkman').getValue()    
 };   

});

store.load({
params : {
start : 0,
limit : 5
}
});
grid.reconfigure(store, cm);[/code]
[b]问题补充:[/b]
这句代码加不加都一样没反应
[b]问题补充:[/b]
store内容怎么检查啊,不会啊
[b]问题补充:[/b]
[size=medium][color=blue]这个问题先放一放了,以后再接着研究。谢谢所有热心的朋友。[/color][/size]

15个回答

你后台就根据传递过来的参数start,limit来查询数据然后返回咯.
如果需要前台分页,看官方的
Paging with Local Data

Paging can also be accomplished with local data using extensions:

Ext.ux.data.PagingStore
Paging Memory Proxy (examples/ux/PagingMemoryProxy.js)

官方的示例看过了吧?
[url]http://extjs.com/deploy/dev/examples/grid/paging.html[/url]
可以用firebug看下它的response返回的json还有ajax的请求参数

跟数据库无关的.

分页grid的查询参数通过store.baseParams来传递,常见问题之一

baseParams : Object
An object containing properties which are to be sent as parameters for every HTTP request.
Parameters are encoded as standard HTTP parameters using Ext.urlEncode.
Note: baseParams may be superseded by any params specified in a load request, see load for more details.
This property may be modified after creation using the setBaseParam method.

如果你一次性把数据取出的后台没有必要处理。
如果你是想在数据库取数据的时候每次只取相应页数的话,才需要start, limit在sql中保证每次只取出相应条目。
看你代码是一次性取出来了让grid自己做分页了。

[quote]问题补充:
现在就不处理吧,但是他也没有自动分页啊,12条数据他是全部显示出来了啊 [/quote]

PageingToolbar是后台分页的,也就是你后台要根据参数来返回指定数目和位置的数据.

如果你后台是一次性返回全部数据,期望前台分页的话,
你需要看官方api中提到的这2个扩展

Paging with Local Data

Paging can also be accomplished with local data using extensions:

[b]Ext.ux.data.PagingStore[/b]
[b]Paging Memory Proxy/b

sql server可以使用
[code="sql"]
select top 5 * from ....
[/code]
来进行分页,不过要用两条select语句联合起来用

[code="sql"]
SELECT TOP 页大小 * FROM tb_info
WHERE
(ID NOT IN (SELECT TOP (页大小*(页数-1)) ID FROM tb_info ORDER BY ID DESC))
AND (info_linkman=?)
ORDER BY ID DESC,info_date ASC
[/code]
页大小指的是每页显示的条数,页数是当前要显示的第几页
例如要显示从6-10的数据,即通过程序计算或者页面传来的值得到第2页
[code="sql"]
SELECT TOP 5 * FROM tb_info
WHERE
(ID NOT IN (SELECT TOP (5*1) ID FROM tb_info ORDER BY ID DESC))
AND (info_linkman=?)
ORDER BY ID DESC,info_date ASC
[/code]

常见问题之一,

分页grid查询参数放在store.baseParams中....

1.这个问题可能是你的resutls的值就是5,可能是后台代码运行的结果不对
2.你在store里面加个监听器看看
[code="java"]
store.on('beforeload', function() { //Ext.data.JsonStore读入数据之前的事件,让store在读入数据之前设置参数。
this.baseParams = {
infoLinkman : Ext.getCmp('infoLinkman').getValue()
};
});

[/code]
3.每次查询后,你要把当前页置成1才行,如果你查询后还要直接显示结果的第二页,会出现不少莫名其妙的问题,而且这个也不好实现

可能是因为刚开始加载的时候,infoLinkman组件还没有渲染到,
你把监听放到 find()里面的store去,初始的那个store不用加beforeload监听

共15条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问