Click here to Skip to main content
15,888,351 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
in my project, we are using data-tables for display the data, one of the column have text more than 200 characters, so the user wants that column have fixed width but whenever they want they can stretch the column width to see the full text in that. ( Ex: in excel we can adjust the column width ) like that we want to implement, is it possible.

Can you please suggest to do so

What I have tried:

JavaScript
$(document).ready(function () {

        //Fetching the data from the table using Datatable & Ajax call. .table{width:auto;table-layout:fixed}
        var table = $("#FMHelp").DataTable({
            "ajax": {
                "url": "/Help/GetHelpDetails/",
                "type": "GET",
                "datatype": "json"
            },
            "dom": 'Bfrtip',
            //"dom": '',
            "buttons": [{
                extend: 'excel',
                title: 'FM Help Details',
                filename: 'FM Help Details',
                text: "Export to Excel"
            }
            ],
            //dom: 'lfrtip',
            //initComplete: function(){
            //    $("div.toolbar").html('Click Me!'); },
            "pageLength": 15,
            "lengthMenu": [15, 20, 30, 50, 75, 100],
            "columns": [
                { "data": "ID" },
                { "data": "Description" },
                { "data": "Link" },
                { "data": "File" },
                { "data": "CreatedDate"},
                {
                    mRender: function (data, type, row) {
                        var linkEdit = 'Edit';
                        linkEdit = linkEdit.replace("-1", row.ID);
                        var linkDelete = 'Delete';
                        linkDelete = linkDelete.replace("-1", row.ID);
                        return linkEdit;

                        //return linkEdit + " | " + linkDelete;
                    }
                }],

            
            "columnDefs": [
                   {
                       "targets": [2],
                       "searchable": false,
                    "render": function (data, type, full, meta) {
                        data = '' + data + '';
                        return data;
                    }

                },
                {
                    "targets": [3],
                    "searchable": false,
                    "render": function (data, type, full, meta) {
                        data = 
                            data = '' + data + '';
                        return data;
                    }
                },
                {
                    "targets": [4],
                    "searchable": false,
                    "render": function (value) {
                        if (value != null)
                        {
                            var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
                            var pattern = /Date\(([^)]+)\)/;
                            var results = pattern.exec(value);
                            var dt = new Date(parseFloat(results[1]));
                            dt = dt.getDate() +  "-"  + months [dt.getMonth()] + "-" + dt.getFullYear();
                            return dt;
                        }
                    }
                },
            {
                "targets": [ 5 ],
                "searchable": false
            }]
        });
Posted
Updated 27-Jul-18 3:04am
v2

1 solution

AFAIK there is nothing built in to support this in jQuery tables. Your alternatively could be to use either this[^] extension or to write it on your own. You may also want to evaluate some other JS based table which has this functionality.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900