Maison >interface Web >js tutoriel >Comment appliquer les tables de données du plug-in jQuery pour la manipulation de tables
Comment appliquer les tables de données du plug-in jQuery pour la manipulation de tables
- php中世界最好的语言original
- 2018-04-24 11:41:493423parcourir
Cette fois, je vais vous montrer comment appliquer les tables de données du plug-in jQuery pour les tables d'opération. Quelles sont les précautions pour appliquer les tables de données du plug-in pour les tables d'opération jQuery. jetez un oeil.
1. Introduction aux Datatables
DataTables est un plug-in de table jQuery. Il s'agit d'un outil très flexible basé sur des améliorations progressives qui ajouteront des contrôles interactifs avancés et la prise en charge de n'importe quel formulaire HTML. Principales fonctionnalités :
Traitement automatique de la pagination
Formulaire instantanéFiltrage des données
Tri des données et type de donnéesdétection automatique
traitement automatique Largeur de colonne
Style personnalisable via CSS
Prise en charge des colonnes masquées
Facile à utiliser
Évolutivité et flexibilité
Internationalisation
Création dynamique de tables
Gratuit
2. Comment utiliser Lors de l'exécution du backend, il n'y a pas d'artistes ni d'ingénieurs front-end pour coopérer avec vous pour créer la page afin d'afficher. les données, il y en a certaines Pour l'esthétique, nous pouvons utiliser le plug-in DataTables de jQuery pour nous aider à accomplir la tâche
1 La configuration par défaut de DataTables
$(document).ready(function() {
$('#example').dataTable();
} );
2. Quelques configurations d'attributs de base des DataTables
"bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "bFilter": true, //过滤功能 "bSort": false, //排序功能 "bInfo": true,//页脚信息 "bAutoWidth": true//自动宽度
3. Tri des données
$(document).ready(function() {
$('#example').dataTable( {
"aaSorting": [
[ 4, "desc" ]
]
} );
} );À partir du chapitre En partant de la colonne 0, trier dans l'ordre inverse avec la colonne 4
4. Masquer certaines colonnes
$(document).ready(function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ "bVisible": false, "aTargets": [ 3 ] }
] } );
} );
5. Internationalisation
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉， 没有找到",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
},
"sZeroRecords": "没有检索到数据",
"sProcessing": "<img src='./loading.gif' />"
}
} );
} );
6. Fonction de tri :
$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
{ "asSorting": [ "asc" ] },
{ "asSorting": [ "desc", "asc", "asc" ] },
{ "asSorting": [ ] },
{ "asSorting": [ ] }
]
} );
} );
7. Données Obtenez une assistance pour 4 types : comme suit
•Données de document DOM
•Javascript tableau js tableau
-
•Source Ajax Données de requête Ajax
•Traitement côté serveur Données côté serveur
3. Explication avec des exemples
1. Exigences : Comme indiqué dans la figure ci-dessous, ajoutez, modifiez et supprimer le contenu des tables de données. 2. Analyse : Ajouter une fonction --- cliquez sur le bouton Ajouter pour faire apparaître une boîte de dialogue permettant d'ajouter un nouveau contenu. Fonction d'édition --- Cliquez sur les tables de données pour sélectionner une ligne. La ligne change de couleur, ce qui signifie qu'elle a été sélectionnée. Cliquez sur le bouton d'édition pour afficher la boîte de dialogue. Le contenu de cette boîte de dialogue est le contenu de la ligne que nous avons sélectionnée. . Si aucune ligne n'est sélectionnée et que vous cliquez sur le bouton Modifier, la boîte de dialogue ne s'affichera pas. Lorsqu'on double-clique sur une ligne des tables de données, une boîte de dialogue apparaît également et la couleur de la ligne sur laquelle nous avons double-cliqué change. Le contenu de la boîte de dialogue est le contenu de la ligne sur laquelle nous avons double-cliqué.
Fonction Supprimer --- cliquez sur les tables de données pour sélectionner une ligne, cliquez sur le bouton Supprimer et une boîte d'avertissement apparaîtra pour vous demander si vous souhaitez supprimer le contenu sélectionné. Lorsque rien n'est sélectionné, cliquer sur le bouton Supprimer ne fera pas apparaître de boîte d'avertissement et le contenu ne sera pas supprimé.
3. Encodage :
Attributs//Nom
<table id="gridtable" class="gridtable">//声明jquery datatables
<thead>
<tr>
<th>Name
</th>
<th>Value
</th>
<th>DisplayOrder
</th>
</tr>
</thead>
<tbody>
.....//datatables内容，此处省略
</tbody>
</table>
<input type="button" id="add" value="Add" />//添加按钮
<input type="button" id="edit" value="Edit" />//编辑按钮
<input type="button" id="delete" value="Delete" />//删除按钮
<p id="e_Attributes">//声明dialog,异步更新
@using (Ajax.BeginForm("Update", "Product", new AjaxOptions
{
UpdateTargetId = "d_Attributes",
OnSuccess = "dialogClose",
HttpMethod = "Post",
}))
{
<table>
<tbody>
<tr>
<td>Name</td>
<td>
<input id="name" name="Name" type="text" style="width:250px" class="required"/>*</td>
</tr>
<tr>
<td>Value</td>
<td>
<input id="value" name="Value" type="text" style="width:250px" class="required"/>*</td>
</tr>
<tr>
<td>DisplayOrder</td>
<td>
<input id="displayOrder" name="DisplayOrder" type="text" style="width:128px" class="required"/>*</td>
</tr>
<tr>
<td>
<input id="submit" type="submit" name="submit" value="Submit" />
<input id="hiddenValue" type="hidden" name="hiddenValue" />
</td>
</tr>
</tbody>
</table>
}
</p>
上面代码说明：这段代码主要分了两个部分，第一部分是jquery datatables的声明，
