How to use jtable method in jquery-Front-end Q&A-php.cn

How to use jtable method in jquery

WBOY

Release： 2022-06-24 16:08:38

Original

1776 people have browsed it

In jquery, the jtable method is used to create a CRUD table based on Ajax. It is a table extension plug-in and does not require HTML and JavaScript coding. The syntax is "".

How to use jtable method in jquery

The operating environment of this tutorial: windows10 system, jquery3.6.0 version, Dell G3 computer.

How to use the jtable method in jquery

jTable is a jQuery plug-in used to create Ajax-based CRUD tables without HTML and JavaScript coding.

Add after downloading:

Add these lines to the HEAD section of the HTML document:

<!-- 包括其中一种 jTable 样式。-->
<link href="/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />
<!-- 包含jTable脚本文件。-->
<script src="/jtable/jquery.jtable.min.js" type="text/javascript"></script>

Copy after login

You can choose any theme and color mode in the theme folder.

Note: You must also add the required jQuery and jQueryUI JavaScript and CSS files before importing the jTable file.

Creating a container

jTable only requires a container element for the table.

<div id="PersonTableContainer"></div>

Copy after login

Create a jTable instance

Add these JavaScript codes to your page:

<script type="text/javascript"> 
    $(document).ready(function () { 
        $(&#39;#PersonTableContainer&#39;).jtable({ 
            title: &#39;人员表&#39;, 
            actions: { 
                listAction: &#39;/GettingStarted/PersonList &#39;，
                createAction：&#39;/GettingStarted/CreatePerson&#39;，
                updateAction：&#39;/GettingStarted/UpdatePerson&#39;，
                deleteAction：&#39;/GettingStarted/DeletePerson&#39; 
            }，
            字段：{ 
                PersonId：{
                    键：true，
                    列表：false 
                }，
                名称：{
                    标题：&#39;作者姓名&#39;，
                    宽度：&#39;40%&#39; 
                }，
                年龄：{
                    标题：&#39;年龄&#39;，
                    宽度：&#39;20%&#39; 
                }，记录日期
                ：{
                    标题：&#39;记录日期&#39;，
                    宽度：&#39;30%&#39;，
                    类型：&#39;日期&#39;，
                    创建：假，
                    编辑：假
                } 
            } 
        }）；
    }); 
</脚本>

Copy after login

Video tutorial recommendation: jQuery video tutorial

The above is the detailed content of How to use jtable method in jquery. For more information, please follow other related articles on the PHP Chinese website!