easyui-datagrid的分页功能

easyui-datagrid的分页功能

1.table

    pagination为true时，会显示分页栏。easyui中的数据表格需要接收
    两个参数
    total:数据总数
    rows：数据

//  类似这种形式
 {
   "total":2000,
   "rows":[
      {"code":"A","name":"果汁","price":"20"},
      {"code":"B","name":"汉堡","price":"30"},
      {"code":"C","name":"鸡柳","price":"40"},
      {"code":"D","name":"可乐","price":"50"},
      {"code":"E","name":"薯条","price":"10"},
      {"code":"F","name":"麦旋风","price":"20"},
      {"code":"G","name":"套餐","price":"100"}
   ]
}

<table class="easyui-datagrid" id="itemList" title="商品列表" 
data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:10,toolbar:toolbar">
    <thead>
        <tr>
           <th data-options="field:'ck',checkbox:true"></th>
           <th data-options="field:'id',width:60">商品ID</th>
            <th data-options="field:'title',width:200">商品标题</th>
            <th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName">叶子类目</th>
            <th data-options="field:'sellPoint',width:100">卖点</th>
            <th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">价格</th>
            <th data-options="field:'num',width:70,align:'right'">库存数量</th>
            <th data-options="field:'barcode',width:100">条形码</th>
            <th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">状态</th>
            <th data-options="field:'created',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">创建日期</th>
            <th data-options="field:'updated',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">更新日期</th>
        </tr>
    </thead>
</table>

2.查找业务实现

2.1封装商品数据和页面数据

@JsonIgnoreProperties(ignoreUnknown=true) //表示JSON转化时忽略未知属性
@TableName("tb_item")
@Data
@Accessors(chain=true)
public class Item extends BasePojo{
   @TableId(type=IdType.AUTO)
   private Long id;            //商品id
 private String title;        //商品标题
 private String sellPoint;     //商品卖点信息
 private Long   price;        //商品价格 Long > dubbo private Integer num;         //商品数量
 private String barcode;          //条形码
 private String image;        //商品图片信息 1.jpg,2.jpg,3.jpg private Long   cid;             //表示商品的分类id
 private Integer status;          //1正常，2下架
 //为了满足页面调用需求,添加get方法
 public String[] getImages(){
      
      return image.split(",");
   }
}

/**
 * @Author WL
 * @Date 2020-9-25 17:31
 * @Version 1.0
 */
@AllArgsConstructor
@NoArgsConstructor
@Data
@Accessors(chain = true)
public class PageItem<T> implements Serializable {
    private Long total;
    private List<Item> rows;

2.2持久层Mapper

public interface ItemMapper extends BaseMapper<Item>{
    @Select("select * from tb_item limit #{page},#{rows}")
    List<Item> findAll(Integer page, Integer rows);
}

2.3业务层

public interface ItemService {
    PageItem<Item> findAll(Integer page, Integer rows);
   
}

@Service
public class ItemServiceImpl implements ItemService {
   
 @Autowired
 private ItemMapper itemMapper;
 @Override
 public PageItem<Item> findAll(Integer page,Integer rows) {
    
      List<Item> list = itemMapper.findAll(page, rows);
      long total = itemMapper.selectCount(null);
      PageItem<Item> pageItem = new PageItem<Item>();
      pageItem.setTotal(total);
      pageItem.setRows(list);
      return pageItem;
   }
}

2.4 控制层

@Controller
@RequestMapping("/item/")
public class ItemController {
   
 @Autowired
 private ItemService itemService;
 @ResponseBody
 @GetMapping("query")
   public PageItem<Item> doFindAll(HttpServletRequest request){   // 从request请求中获取页码数据
 // easyUI在启用分页时，会额外的发送两个参数 page:当前页码 rows:每页显示行数 名字固定
 int page = Integer.parseInt(request.getParameter("page"));
      int rows = Integer.parseInt(request.getParameter("rows"));
      PageItem<Item> all = itemService.findAll(page,rows);
      return all;
   }
}

总结

使用easyui-datagrid分页时，需要根据page和rows搜索当前页信息，所以需要接收客户端传来的页码信息因此写sql语句时要注意使用limit，另外从request取得的page和rows是String类型的，需要使用Integer.parseInt转换为int类型。