最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Solution for Ellipsis - Jquery + Bootstrap + Datatables - Stack Overflow

programmeradmin1浏览0评论

I am using Datatables on a site with bootstrap and jquery for a large (2000+ entries) table. Some of the (text) values are way too long and at the moment I use something like this:

render: function ( data, type, row ) {
                        return data.length > 35 ?
                        data.substr( 0, 35 ) +'…' :
                            data;
                    }

in Datatables to cut the strings and display the full value in the html title. Is there a better way to do this? Like a plugin that automatically cuts but shows all when clicked on or something similar? I was not able to find something.

I saw jquery dotdotdot but it doesnt give me a click to extend.

I am using Datatables on a site with bootstrap and jquery for a large (2000+ entries) table. Some of the (text) values are way too long and at the moment I use something like this:

render: function ( data, type, row ) {
                        return data.length > 35 ?
                        data.substr( 0, 35 ) +'…' :
                            data;
                    }

in Datatables to cut the strings and display the full value in the html title. Is there a better way to do this? Like a plugin that automatically cuts but shows all when clicked on or something similar? I was not able to find something.

I saw jquery dotdotdot but it doesnt give me a click to extend.

Share Improve this question edited Nov 2, 2017 at 15:53 davidkonrad 85.6k17 gold badges209 silver badges271 bronze badges asked Jul 13, 2016 at 9:05 NicoNico 331 silver badge5 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 8

Modifying strings in javascript in order to make them more viewable or "fitted" to certain DOM elements is a total no-go. Especially when you as here have many strings that is being preprocessed in a callback.

If you force fixed widths to some (or all) columns, example :

table.dataTable td:nth-child(3) {
  max-width: 100px;
}

Then you can use simple CSS to ensure that the content of the columns not is wrapped, not go beyond margins and displays a nice ellipsis if it is too large by

table.dataTable td  {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

demo -> http://jsfiddle/ax1gr1og/

发布评论

评论列表(0)

  1. 暂无评论