web-dev-qa-db-fra.com

jquery datatable - définit la largeur de colonne et le texte d'habillage

Nous utilisons le plugin Scroller pour notre table de données jquery pour permettre le défilement virtuel. Cependant, nous avons besoin de prendre en charge l'habillage du texte à l'intérieur d'une cellule, car l'utilisateur souhaite afficher l'intégralité du texte au lieu d'un texte tronqué. J'ai remarqué qu'il n'emballe pas le texte par défaut. Existe-t-il un moyen de prendre en charge cette fonctionnalité? Une solution possible?

Violoneux https://jsfiddle.net/Vimalan/2koex0bt/1/

Code html: 

<table id="example" class="display" cellspacing="0" width="100%"></table>

Code js: 

var detailsSample = "DataTables and its extensions are extremely configurable libraries and almost every aspect of the enhancements they make to HTML tables can be customised. Features can be enabled, disabled or customised to meet your exact needs for your table implementations."
var dataList = [];

for (var i=1; i<=500; i++)
{
    var dataRow = {};

    dataRow.ID = i;
    dataRow.FirstName = "First Name " + i;
    dataRow.LastName = "Last Name " + i;

    if (i%5 ==0)
    {
        dataRow.Details = detailsSample;
    }
    else
    {
        dataRow.Details = "Large text "+i;
    }
    dataRow.Country = "Country Name";

    dataList.Push(dataRow);
}

$('#example').DataTable( {
                data:                       dataList,
        deferRender:    true,
        scrollX:                true,
        scrollY:        200,
        scrollCollapse: true,
        scroller:       true,
        searching:          false,
        paging:                 true,
        info:                   false,
        columns: [
                { title: "ID", data: "ID" },
                { title: "First Name", data: "FirstName" },
                { title: "Change Summary", data: "LastName"},
                { title: "Details", data: "Details", "width": "400px"  },
                { title: "Country", data: "Country" }               
            ]
    } );

Attente

Dans le tableau ci-dessus, la colonne "Détails" doit toujours avoir une largeur de 400 pixels et le texte de cette colonne doit se terminer.

Toute suggestion sera grandement appréciée.

javascriptjqueryhtmlcssdatatables
7
Vimalan Jaya Ganesh

A trouvé la solution en encapsulant les données de la colonne dans un div et en définissant les propriétés de l'espace blanc et de la largeur css pour le div.

Violoneux: https://jsfiddle.net/Vimalan/2koex0bt/6/

[~ # ~] js [~ # ~] 

$('#example').DataTable( {
        data:           dataList,
        deferRender:    true,
        scrollX:        true,
        scrollY:        200,
        scrollCollapse: true,
        scroller:       true,
        searching:      false,
        paging:         true,
        info:           false,
        columns: [
                { title: "ID", data: "ID" },
                { title: "First Name", data: "FirstName" },
                { title: "Change Summary", data: "LastName"},
                { title: "Details", data: "Details" },
                { title: "Country", data: "Country" }               
            ],
            columnDefs: [
                {
                    render: function (data, type, full, meta) {
                        return "<div class='text-wrap width-200'>" + data + "</div>";
                    },
                    targets: 3
                }
             ]
    } );

[~ # ~] css [~ # ~] 

.text-wrap{
    white-space:normal;
}
.width-200{
    width:200px;
}
20
Vimalan Jaya Ganesh

Vous ne savez pas si vous ajoutez des feuilles de style ou non, mais définissez votre disposition de table sur fixe et ajoutez l'espace blanc. Actuellement, vous utilisez un espace blanc: pas de retour à la ligne qui annule ce que vous essayez de faire. J'ai également défini une largeur maximale pour tous vos td, cela se produira donc en cas de débordement.

Ajoutez ceci à la fin de votre jQUery

https://jsfiddle.net/2koex0bt/5/

$(document).ready(function(){
    $('#example').DataTable();
    $('#example td').css('white-space','initial');
});

Si vous souhaitez simplement utiliser l'API, faites-le (ajoutez plus de CSS pour changer le style).

Si vous voulez le faire avec CSS, faites ceci:

table {
  table-layout:fixed;
}
table td {
  Word-wrap: break-Word;
  max-width: 400px;
}
#example td {
  white-space:inherit;
}
8
Keith