A high render quality pagination component base on React.js
React.render(
<Pagination
url="/api/getproduct"
data={
{
index : 1,
size : 10,
data : {
name : "page"
}
}
}
index="1"
size="10"
supertype=""
type=""
status=""
callback={
function(componentState){
React.render(
<Product data={componentState.data} />,
document.querySelector(".products")
);
}
}
/>,
document.querySelector("#pagination")
);
React.render(
React.createElement(Pagination, {
url : "/api/getproduct",
data : {
index : 1,
total : 10,
data : {
name : "page"
}
},
index : "1",
size : "10",
supertype : "",
type : "",
status : "",
callback : function(componentState){
React.render(
React.createElement(Product, {data: componentState.data}),
document.querySelector(".products")
);
}
}),
document.querySelector("#pagination")
);
app.get("/api/getproduct", function(req, res){
res.json({
index : parseInt(req.query.index) || 1,
size : parseInt(req.query.size) || 10,
total : 10,
data : {
name : "page" + (parseInt(req.query.index) || 1)
}
});
});
- Arguments in the interface like
supertype
,type
andstatus
can be changed into any other arguments which the server side need.- If you wanna initialize this component and make a request to get data from server side the same time, make sure you write down the
url
in the interface. - If you've got data outer this component and just wanna send the data into it, make sure you write both the
url
and thedata
down in the interface so that it will not send a request the first time you initialize it and send the requests only on your click events.
- If you wanna initialize this component and make a request to get data from server side the same time, make sure you write down the