search
HomeBackend DevelopmentPHP Tutorialjavascript - The pagination display in easyui1.5 datagrid is not normal. Please help me.

1. Problem description: When using easyui1.5, I found that if toolbar is used in datagrid, the paging control in datagrid will not display properly! Go down a few px, as shown in the picture: javascript - The pagination display in easyui1.5 datagrid is not normal. Please help me.

2. Findings after debugging (2 points):
1. There are 2 implementation methods for the datagrid toolbar. javascript - The pagination display in easyui1.5 datagrid is not normal. Please help me.
Not both implementations have the above problems. Only when using the

implementation will problems occur. When using js arrays, everything is displayed normally. 2. As long as you adjust the size of the browser window (shrink a little or enlarge a little), the paging display will be normal immediately. PS: I think the height is not calculated accurately during initialization~~
3. Question code:

<code> <script>
     $(function(){
        $('#category').datagrid({
            url: '{:U("Category/getList")}',
            border: false,
            toolbar: '#tbar',
            fit: true,

            columns:[[
                {field:'id',checkbox:true},
                {field:'sort',title:'排序',width:100},
                {field:'name',title:'栏目名称',width:100},
                {field:'create_time',title:'创建时间',width:100},
            ]],
            pagination: true,

            fitColumns: true,
            rownumbers: true,
            data: [
                {
                    "id": 1,
                    "sort": 1,
                    "name": "助力海东",
                    "create_time": "2016-08-15 15:13:87"
                },
                {
                    "id": 2,
                    "sort": 2,
                    "name": "助力海东",
                    "create_time": "2016-08-15 15:13:87"
                }
            ]
        });
    });
</script>

<table id="category"></table>
<div id="tbar" style="padding: 5px;">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新增</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
</div>
</code>
Please help me if you have the same problem, thank you

Reply content:

1. Problem description: When using easyui1.5, I found that if toolbar is used in datagrid, the paging control in datagrid will not display properly! Go down a few px, as shown in the picture:

javascript - The pagination display in easyui1.5 datagrid is not normal. Please help me.

2. Findings after debugging (2 points):

1. There are 2 implementation methods for the datagrid toolbar.
javascript - The pagination display in easyui1.5 datagrid is not normal. Please help me.Not both implementations have the above problems. Only when using the

implementation will problems occur. When using js arrays, everything is displayed normally. 2. As long as you adjust the size of the browser window (shrink a little or enlarge a little), the paging display will be normal immediately. PS: I think the height is not calculated accurately during initialization~~

3. Question code:
<code> <script>
     $(function(){
        $('#category').datagrid({
            url: '{:U("Category/getList")}',
            border: false,
            toolbar: '#tbar',
            fit: true,

            columns:[[
                {field:'id',checkbox:true},
                {field:'sort',title:'排序',width:100},
                {field:'name',title:'栏目名称',width:100},
                {field:'create_time',title:'创建时间',width:100},
            ]],
            pagination: true,

            fitColumns: true,
            rownumbers: true,
            data: [
                {
                    "id": 1,
                    "sort": 1,
                    "name": "助力海东",
                    "create_time": "2016-08-15 15:13:87"
                },
                {
                    "id": 2,
                    "sort": 2,
                    "name": "助力海东",
                    "create_time": "2016-08-15 15:13:87"
                }
            ]
        });
    });
</script>

<table id="category"></table>
<div id="tbar" style="padding: 5px;">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新增</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
</div>
</code>

Please help me if you have the same problem, thank you

1. Just use js array to write it, and there will be no problem.

2. I have encountered many situations where the first time it was abnormal and the window would display normally just by changing the window, I guess the reason is this: easyui will get the height of the form for the first time, and then render the page, but you write the toolbar below Later, he thought that without that height, the paging would naturally go down a part when the toolbar is displayed. You can try adding the height attribute

<code>            height : $('#**').height()-**,
            pagination : true,
</code>
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
How do you create and use an interface in PHP?How do you create and use an interface in PHP?Apr 30, 2025 pm 03:40 PM

The article explains how to create, implement, and use interfaces in PHP, focusing on their benefits for code organization and maintainability.

What is the difference between crypt() and password_hash()?What is the difference between crypt() and password_hash()?Apr 30, 2025 pm 03:39 PM

The article discusses the differences between crypt() and password_hash() in PHP for password hashing, focusing on their implementation, security, and suitability for modern web applications.

How can you prevent Cross-Site Scripting (XSS) in PHP?How can you prevent Cross-Site Scripting (XSS) in PHP?Apr 30, 2025 pm 03:38 PM

Article discusses preventing Cross-Site Scripting (XSS) in PHP through input validation, output encoding, and using tools like OWASP ESAPI and HTML Purifier.

What is autoloading in PHP?What is autoloading in PHP?Apr 30, 2025 pm 03:37 PM

Autoloading in PHP automatically loads class files when needed, improving performance by reducing memory use and enhancing code organization. Best practices include using PSR-4 and organizing code effectively.

What are PHP streams?What are PHP streams?Apr 30, 2025 pm 03:36 PM

PHP streams unify handling of resources like files, network sockets, and compression formats via a consistent API, abstracting complexity and enhancing code flexibility and efficiency.

What is the maximum size of a file that can be uploaded using PHP ?What is the maximum size of a file that can be uploaded using PHP ?Apr 30, 2025 pm 03:35 PM

The article discusses managing file upload sizes in PHP, focusing on the default limit of 2MB and how to increase it by modifying php.ini settings.

What is Nullable types in PHP ?What is Nullable types in PHP ?Apr 30, 2025 pm 03:34 PM

The article discusses nullable types in PHP, introduced in PHP 7.1, allowing variables or parameters to be either a specified type or null. It highlights benefits like improved readability, type safety, and explicit intent, and explains how to declar

What is the difference between the unset() and unlink() functions ?What is the difference between the unset() and unlink() functions ?Apr 30, 2025 pm 03:33 PM

The article discusses the differences between unset() and unlink() functions in programming, focusing on their purposes and use cases. Unset() removes variables from memory, while unlink() deletes files from the filesystem. Both are crucial for effec

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software