"."/> ".">

Home  >  Article  >  Web Front-end  >  How to use jtable method in jquery

How to use jtable method in jquery

WBOY
WBOYOriginal
2022-06-24 16:08:381830browse

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 "fa7a425956d1c8446c248afda4de5a8b2cacc6d41bbb37262a98f745aa00fbf0".

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>

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>

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;,
                    创建:假,
                    编辑:假
                } 
            } 
        });
    }); 
</脚本>

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!

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