javascript - 如何在数据表列中仅显示前 30 个字符,然后放置“阅读更多”按钮?

标签 javascript jquery datatable

我有这样的 json

enter image description here

结果我的数据表看起来像这样

enter image description here

我只想显示 25 个字符,并且不想使用旁边的“阅读更多”按钮来显示整个说明,但我不知道该怎么做,

这是我的数据表实现

$('#subsocieties-table').DataTable({
            retrieve: true,
            ajax: {
                url: '/FrontEnd/resources/getsubsocieties?row='+row,
                dataSrc: '' 
            },

            "columns": [
                        { "data": "societyBlockId" },
                        { "data": "name" },
                        { "data": "address" },
                        { "data": "description" }, // here in description i display now how to dispaly first 30 characters and than place read ore button in it ??
                        { "data": "launchDate" },
                        { "data": "blockByLawsFile" },
                        { "data": "blockFile" },
                        { "data": "type.name" },
                        { "data": "status.name" },

                              {
                                  "data": null,
                                  "className": "dt-center",
                                  searchable: false,

                                  orderable : false,
                                  render : function ( data, type, row, meta ) {
                                      return '<a href="javascript:ShowBlockPPlanDetails('+row.id+', '+meta.row+')">Show Details</a>';
                          } },

                      {
                          "data": null,
                          "className": "dt-center",
                          searchable: false,

                          orderable : false,
                          render : function ( data, type, row, meta ) {
                              return '<a href="javascript:ShowBlockFeaturesDetails('+row.id+', '+meta.row+')">Show Details</a>';
                  } },
                        {
                          "data": null,
                          "className": "dt-center",
                          searchable: false,
                          click: false, 
                          orderable : false,
                          render : function ( data, type, row, meta ) {
                          return '<a href="javascript:editSubSocieties('+row.id+', '+meta.row+')">Edit</a> / <a href="javascript:removeSubSocieties('+row.id+', '+meta.row+')">Delete</a>';
                          } }
                       ] ,
                       "columnDefs": [
                                       {
                                           "targets": [ 0 ],
                                           "visible": false,
                                           "searchable": false
                                       }
                                       ,
                                  {
                                      "targets":5,
                                      "data": "download_link",
                                      "render": function ( data, type, row, meta ) {

                                     if(data != null)
                                         {
                                            var ext = data.split('.').pop();
                                        return '<a href="download.do?filename='+row.societyBlockId+'_blockbylawfile.'+ext+'">'+data+'</a>';
                                         }
                                     else
                                         {
                                            ext = data;
                                            return "";
                                         }


                                         }

                                    },
                                    {
                                        "targets":6,
                                        "data": "download_link",
                                        "render": function ( data, type, row, meta ) {
                                         if(data != null)
                                     {
                                        var ext1 = data.split('.').pop();
                                    return '<a href="download.do?filename='+row.societyBlockId+'_blockfile.'+ext1+'">'+data+'</a>';
                                     }
                                 else
                                     {
                                        ext1 = data;
                                    return "";
                                     }

                                        }
                                    }
                                 ]
                });

请告诉我如何做到这一点,谢谢!

最佳答案

你有一个像这样的插件:

  • dataTables.TruncateCells - 将列中的每个单元格 chop 为设定数量的字符,用省略号替换最后 3 个,并将完整的预 chop 文本放入单元格的标题中。

关于javascript - 如何在数据表列中仅显示前 30 个字符,然后放置“阅读更多”按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36937934/

相关文章:

javascript - 动态更改内容并替换当前 URL

jquery.index()

python - 来自字典的 Django 数据表

php - 性能 text/html 与 application/json

javascript - .hover 和 div 出现干扰

c# - DataTable的Row's First Column to String Array

c# - 将数据添加到现有 DataTable 的 DataRow

javascript - 修复了 Bootstrap 响应表和 AngularJS 的第一列

javascript - (如何)我可以在 switch 语句中使用 'or' 吗?

javascript - 将数组元素添加到另一个数组