Mémento : DataTables

Table plug-in for jQuery

 Publié le 10·01·2020  (Mise à jour le 25·02·2020)  |  Skeeter

Initialisation

1
2
3

$(document).ready( function () {
    $('#myTable').DataTable();
} );

dom - Options

Permet de définir les contrôles et leur ordre d’apparition sur le tableau. Plus de détail sur la documentation officielle.

Valeur par défaut : lfrtip

  • l - length changing input control
  • f - filtering input (zone de recherche)
  • t - The table! (le tableau, permet d’indiquer sa position)
  • i - Table information summary
  • p - pagination control (contrôle de pagination)
  • r - processing display element

Des extensions sont disponibles :

  • B - Buttons
  • R - ColReorder
  • S - Scroller
  • P - SearchPanes

Il est possible de gérer l’affichage des boutons avec les options suivantes :

dom: "Bfrtip",
buttons: [
    'copy', 'pdf'
]
[Lire]
DataTables  jQuery 

Howto: Textbox jQuery Autocomplete avec ASP.NET MVC 5

 Publié le 3·01·2020  (Mise à jour le 1·02·2021)  |  Skeeter

Cet article explique comment configurer l’auto-completion dans un champ texte, dans un formulaire utilisant jQuery et ASP.NET MVC 5.

Configuration du projet

Lancer la console NuGet, rechercher et installer le package jQuery.UI.Combined :

Package NuGet jQuery.UI.Combined

Mettre à jour le fichier BundleConfig.cs pour référencer les fichiers jQuery UI (JS et CSS) :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

public class BundleConfig
{
    // Pour plus d'informations sur le regroupement, visitez https://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Utilisez la version de développement de Modernizr pour le développement et l'apprentissage. Puis, une fois
        // prêt pour la production, utilisez l'outil de génération à l'adresse https://modernizr.com pour sélectionner uniquement les tests dont vous avez besoin.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                    "~/Scripts/jquery.unobtrusive-ajax.js",
                    "~/Scripts/bootstrap.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/Content/bootstrap.css",
                    "~/Content/themes/base/jquery-ui.css",
                    "~/Content/site.css"));
    }
}
[Lire]
ASP.NET MVC 5  MVC  jQuery  Formulaire  WebDev  HowTo