需要像jquery数据表中的excel一样调整列（MVC，C＃） [英] Need to adjust the column like excel in jquery datatables (MVC, C#)

问题描述

在我的项目中，我们使用数据表来显示数据，其中一列有超过200个字符的文本，因此用户希望该列具有固定宽度但是只要他们想要它们就可以拉伸列宽以查看全文。 （例如：excel我们可以调整列宽）就像我们想要实现的那样，是否可能。



你能否建议这样做



我尝试过：

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:

$(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
            }]
        });

推荐答案

（ document ）。ready（ function （） {

// 使用Datatable& Ajax调用从表中获取数据。 {width：auto; table-layout：fixed}
var table =

(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： 获取，
数据类型： json
}，
< span class =code-string> dom：' Bfrtip'，
// dom：''，
buttons：[{
extend：' excel'，
title：' FM帮助详情'，
文件名：' FM帮助详情'，
text： 导出到Excel
}
]，
// dom：'lfrtip'，
// initComplete：function（）{
//

("#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：[
{ < span class =code-string> data： ID}，
{ data： 描述}，
{ 数据： 链接}，
{ data： 文件}，
{ data： CreatedDate}，
{
mRender： function （数据，类型，行）{
var linkEdit = ' 编辑;
linkEdit = linkEdit.replace（ - 1，row.ID）;
var linkDelete = ' 删除';
linkDelete = linkDelete.replace（ - 1，row.ID）;
return linkEdit;

// return linkEdit +|+ linkDelete;
}
}]，


columnDefs：[
{
targets：[ 2 ]，
searchable：< span class =code-keyword> false ，
render ： function （数据，类型，完整，元）{
data = ' ' + data + ' ';
返回数据;
}

}，
{
目标：[ 3 ]，
searchable： false ，
render： function （data，type，full，meta）{
data =
data = < span class =code-string>' ' + data + ' ';
返回数据;
}
}，
{
targets：[ 4 ]，
可搜索： false ，
render： function （value）{
if （value！= null ）
{
var months = [ Jan， 2月， 3月， <跨度class =code-string> Apr， May， Jun， Jul， 8月， 9月， Oct， 11月， Dec];
var pattern = / Date \（（[^]] +）\）/;
var results = pattern.exec（value）;
var dt = new 日期（ parseFloat （结果[ 1 ]））;
dt = dt.getDate（）+ - + months [dt.getMonth（ ）] + - + dt.getFullYear（）;
return dt;
}
}
}，
{
目标：[ 5 ]，
searchable： false
}]
}）;

("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 }] });

这篇关于需要像jquery数据表中的excel一样调整列（MVC，C＃）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！