easyui-datagrid分页部分翻页按钮不显示

Posted 2023-05-01

css代码:
.ranks_con_table
height:380px; margin-top:10px; overflow:hidden;

html代码：
<div class="easyui-layout ranks_con_table" style="padding: 0px;">
<table id="Value_ReTable" class="easyui-datagrid" >
</table>
</div>
js代码：
$('#Value_ReTable').datagrid(
iconCls : 'icon-edit',//图标
url:"xfdId.action",
queryParams:eqdata,
height : 1500,
width : 1000,
striped : true,
fit : true,
fitColumns : true,
pagination:true,
singleSelect:true,
loadFilter:function(data)
if(eval('(' + data.returnArray + ')').pointList)
var tableList=eval('(' + data.returnArray + ')').List;
return tableList;

,
columns : [ [
field: 'name',
width: 160,
title: '名称'
,

field : 'btn',
width : '22',
title : '详情',
formatter: function (value, row, index)
var rowStr=JSON.stringify(row);
var roww=rowStr.replace(/\"/g, "'");
//alert(rowStr.replace("\"", "'"));
return "<img width='20' height='20' src='../layers/images/i_einfo.png' onclick=\"javascript:openFunction("+roww+");window.event.cancelBubble=true;\"/>";


]],
onClickRow: function (rowIndex, data)

);

问题：分页部分 翻页按钮不显示，但鼠标悬浮上之后还有。可以点击，执行翻页操作。

页面上显示这种效果。
我想要的效果：

参考技术A 后台接收到，是怎样的参数 。。。。。。。。。 传回来又， 怎样的数据追问

样式出来了，是因为我之前给他设置了其他的样式导致把原始的easyui样式覆盖了。

easyui-datagrid连接数据库实现分页查询数据

一、利用MVC思想建立底层数据库：

package com.hanqi.dao;

import java.util.ArrayList;
import java.util.List;

import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.Transaction;
import org.hibernate.boot.registry.StandardServiceRegistryBuilder;
import org.hibernate.cfg.Configuration;
import org.hibernate.service.ServiceRegistry;

import com.hanqi.entity.Student;

public class StudentDAO {

    ServiceRegistry sr=null;
    Configuration cfg=null;
    SessionFactory sf=null;
    Session se=null;
    Transaction tr=null;
    
    public StudentDAO()
    {
        cfg=new Configuration().configure();
        
         sr=new StandardServiceRegistryBuilder()
                .applySettings(cfg.getProperties()).build();
        
    }
    //初始化
    private void init()
    {
        
        sf=cfg.buildSessionFactory(sr);
        se=sf.openSession();
        tr=se.beginTransaction();
    }
    //提交和释放资源
    private void destory()
    {
        tr.commit();
        se.close();
        sf.close();
    }
    //获取分页的数据集合
    public List<Student> getPageList(int page,int rows)
    {
        List<Student> rtn=new ArrayList<Student>();
        init();
        int num=(page-1)*rows;
        rtn=se.createQuery("from Student").setFirstResult(num).setMaxResults(rows).list();
        destory();
        return rtn;
    }
    
    //获取数据条数
    public int getTotal()
    {
        int rtn=0;
        init();
        List<Object>lo=se.createQuery("select count(1) from Student").list();
        if(lo!=null&&lo.size()>0)
        {
            rtn=Integer.parseInt(lo.get(0).toString());
        }
        
         destory();
        return rtn;
    }
    
    
    
    
}

二、建立service层

package com.hanqi.service;

import java.util.List;

import com.alibaba.fastjson.JSONArray;
import com.hanqi.dao.StudentDAO;
import com.hanqi.entity.Student;

public class StudentService {

    //查询分页数据
    
    
    
    //返回JSON
    public String getPageJSON(int page,int rows)
    {
        String rtn="{\'title\':0,\'rows\':[]}";
        
        int total=new StudentDAO().getTotal();
        if(total>0)
        {
            List<Student>ls= new StudentDAO().getPageList(page, rows);
            
            String ls_json=JSONArray.toJSONString(ls);
            //利用转义字符转成JSON格式的语句
            rtn="{\\"total\\":"+total+",\\"rows\\":"+ls_json+"}";
            
        }
        
        
        return rtn;
    }
    
}

三、建立servlet：

package com.hanqi.web;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.hanqi.service.StudentService;

/**
 * Servlet implementation class StudentServlet
 */
public class StudentServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public StudentServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html");
        
        String spage=request.getParameter("page");
        String srows=request.getParameter("rows");
        
        if(spage!=null&& srows!=null)
        {
        int page=Integer.parseInt(spage);
        int rows=Integer.parseInt(srows);
        
        String json =new StudentService().getPageJSON(page, rows);
        
        response.getWriter().print(json);
        }
        else
        {
            response.getWriter().print( "{\'title\':0,\'rows\':[]}");
        }
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

4、写出显示界面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 1、JQuery的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>
<!-- 2 css资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">
<!-- 3、图标资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">
<!-- 4、easyui的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>

<!-- 5、本地语言 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
    //创建data_grid
    $("#st").datagrid({
        
        url:\'StudentServlet\', //数据来源   
        //冻结列
    
        //列的定义
        columns:[[ 
            {field:\'sno\',title:\'学生编号\',width:50},    
            {field:\'sname\',title:\'学生姓名\',width:50},    
            {field:\'ssex\',title:\'性别\',width:50,align:\'right\'},
            {field:\'sbirthday\',title:\'生日\',width:50,align:\'center\',hidden:true},
            {field:\'sclass\',title:\'班级\',width:50,align:\'right\',sortable:true}
        ]],
        
        fitColumns:true,//列自适应宽度，不能和冻结列同时设置为true
        striped:true,//斑马线效果
        idField:\'sno\',//主键列
        rownumbers:true,//显示行号
        singleSelect:false,//是否单选
        pagination:true,//显示分页栏
        pageList:[10,20,50,100],//每页行数选择列表
        pageSize:10,//出事每页行数
        remoteSort:false,//是否服务器端排序，设成false，才能客户端排序
        sortName:\'sclass\'//设置排序列
            
                
    });
})


</script>
学生表
<br><br>
<table id="st"></table>

</body>
</html>

效果图：