Comment utiliser la méthode jtable dans jquery

Dans jquery, la méthode jtable est utilisée pour créer une table CRUD basée sur Ajax. Il s'agit d'un plug-in d'extension de table et ne nécessite pas de codage HTML et JavaScript. La syntaxe est "0631f277f192029062e4aaf909aeaac72cacc6d41bbb37262a98f745aa00fbf0".

L'environnement d'exploitation de ce tutoriel : système Windows 10, jquery version 3.6.0, ordinateur Dell G3.

Comment utiliser la méthode jtable dans jquery

jTable est un plug-in jQuery utilisé pour créer des tables CRUD basées sur Ajax sans codage HTML et JavaScript.

Ajouté après le téléchargement :

Ajoutez ces lignes à la section HEAD de votre document HTML :

<!-- 包括其中一种 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>

Vous pouvez choisir n'importe quel thème et mode de couleur dans le dossier du thème.

Remarque : vous devez également ajouter les fichiers JavaScript et CSS jQuery et jQueryUI requis avant d'importer le fichier jTable.

Création d'un conteneur

jTable ne nécessite qu'un élément conteneur pour la table.

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

Créez une instance jTable

Ajoutez ces codes JavaScript à votre 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;，
                    创建：假，
                    编辑：假
                } 
            } 
        }）；
    }); 
</脚本>

Recommandation du didacticiel vidéo : Tutoriel vidéo jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!