Je travaille actuellement sur une application ASP.NET MVC qui utilise des DataTables dans les vues pour pouvoir trier le contenu de la table en cliquant sur l'en-tête.

Le client souhaite que la zone sur laquelle vous pouvez cliquer pour trier les données de cette colonne soit réduite au texte de l'en-tête du tableau.

J'inclus une image pour montrer un exemple.

Example

Actuellement, le carré bleu est la zone sur laquelle vous pouvez cliquer pour trier les données dans cette colonne, le client souhaite que le carré rouge soit la zone sur laquelle vous pouvez cliquer pour trier les données.

Voici à quoi ressemble le tableau de la vue dans Visual Studio:

<table class="table table-hover dataTable" id="areatable">
    <thead>
        <tr>
            <th>
                th1
            </th>
            <th>
                th2
            </th>
            <th>
                th3
            </th>
            <th  data-orderable="false">
                th4
            </th>
        </tr>
    </thead>

    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @item.Number
                </td>
                <td>
                    @item.Alarm
                </td>
                <td>
                    <!--NotImplemented-->
                </td>           
                <td>
                    @Html.ActionLink("Details", "Index", "", null, null)
                </td>
            </tr>
         }
    </tbody>
</table>

Lorsque vous accédez à l'URL dans le navigateur, un en-tête de tableau commence à ressembler à ceci:

<th class="sorting_asc" 
tabindex="0" 
aria-controls="areatable" 
rowspan="1" 
colspan="1" 
aria-sort="ascending" 
aria-label="th1: activate to sort column descending" 
style="width: 442px;">
    th1
</th>

Voici le JavaScript pour initialiser les DataTables:

function InitDatatables() {
    $('table.dataTable')
        .DataTable({
            "paging": false,
            "ordering": true,
            "info": false,
            "searching": true,
            "language": {
                "search": "Zoeken: ",
                "zeroRecords": "Geen bronnen gevonden."
            }
        });

        // This code is to initially hide the filter/search bar.
        $("div.dataTables_filter").hide();
        $('div.dataTables_filter input').addClass('form-control').css({ width: 'auto', display: 'inline-block' });
        $('div.dataTables_filter label').prop('disabled', true).css({ float: 'left', marginLeft: '14px' });
}

J'ai regardé un peu autour de moi et je n'ai pas trouvé de questions similaires.

J'ai essayé d'encapsuler le texte de l'en-tête du tableau dans les balises [a] [/ a], puis d'utiliser JQuery pour supprimer 'class', 'aria-sort' et 'aria-label' des balises [th] [/ th] et les ajouter aux balises [a] [/ a]. Cela n'a pas réussi à cause de mon manque d'expérience avec JQuery.

Chaque fois que je supprimais manuellement les attributs mentionnés des balises [th] [/ th] dans le navigateur en utilisant inspect element, les attributs étaient automatiquement rajoutés aux balises [th] [/ th] en cliquant sur l'en-tête du tableau, je pense que c'est DataTables lui-même qui fait cela.

Existe-t-il un moyen d'atteindre ce que je recherche, ou du moins de donner l'impression que cela fonctionne comme prévu?

Je vous remercie.

0
Gogoku7 24 juil. 2017 à 13:38

2 réponses

Utilisez bSortable: false pour chaque colonne comme ci-dessous:

{"mData": Client, "sClass": "col-md-3 col-lg-3", "sTitle": "Client", "bSortable": false}

Ajoutez span avec une classe à l'intérieur comme ci-dessous:

<th class="col-md-2 col-lg-2 sorting_disabled" rowspan="1" colspan="1" style="width: 105px;" aria-label="Action"><span class="sortClass">Action</span></th>

Le code pour le tri manuel est ici:

Var oTable = $ ('# table-company-manager'). dataTable (); // sélectionne la table en variable en utilisant jquery

$ ('. sortClass'). click (fonction (e) {

E.preventDefault ();

OTable.fnSort ([[0, 'asc']]); // utilisez asc / desc comme vous le souhaitez

});

0
Vikas Nimse 24 juil. 2017 à 11:16

Commentez ces lignes du fichier datatables.js dans la bibliothèque datatable: -

nTh.removeAttribute('aria-sort');
nTh.removeAttribute('aria-label');
nTh.setAttribute('aria-sort', aaSort[0][1] == "asc" ? "ascending" : "descending");
nTh.setAttribute('aria-label', sTitle + ", " (nextSort == "asc" ? oAria.sSortAscending : oAria.sSortDescending));

Ou vous pouvez faire référence à une bibliothèque modifiée et entièrement compatible avec l'accessibilité qui fonctionnera mieux pour vous et répondra à vos besoins, veuillez vous référer au lien ci-dessous.

https://assets.cms.gov/resources/framework/2.0/Pages/datatables.html
0
alfishan aqeel 24 juil. 2017 à 11:06