"."/> ".">
Home > Article > Web Front-end > How to use jtable method in jquery
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".
The operating environment of this tutorial: windows10 system, jquery3.6.0 version, Dell G3 computer.
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 () { $('#PersonTableContainer').jtable({ title: '人员表', actions: { listAction: '/GettingStarted/PersonList ', createAction:'/GettingStarted/CreatePerson', updateAction:'/GettingStarted/UpdatePerson', deleteAction:'/GettingStarted/DeletePerson' }, 字段:{ PersonId:{ 键:true, 列表:false }, 名称:{ 标题:'作者姓名', 宽度:'40%' }, 年龄:{ 标题:'年龄', 宽度:'20%' },记录日期 :{ 标题:'记录日期', 宽度:'30%', 类型:'日期', 创建:假, 编辑:假 } } }); }); </脚本>
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!