ellipsis.js 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. /**
  2. * This data rendering helper method can be useful for cases where you have
  3. * potentially large data strings to be shown in a column that is restricted by
  4. * width. The data for the column is still fully searchable and sortable, but if
  5. * it is longer than a give number of characters, it will be truncated and
  6. * shown with ellipsis. A browser provided tooltip will show the full string
  7. * to the end user on mouse hover of the cell.
  8. *
  9. * This function should be used with the `dt-init columns.render` configuration
  10. * option of DataTables.
  11. *
  12. * It accepts three parameters:
  13. *
  14. * 1. `-type integer` - The number of characters to restrict the displayed data
  15. * to.
  16. * 2. `-type boolean` (optional - default `false`) - Indicate if the truncation
  17. * of the string should not occur in the middle of a word (`true`) or if it
  18. * can (`false`). This can allow the display of strings to look nicer, at the
  19. * expense of showing less characters.
  20. * 2. `-type boolean` (optional - default `false`) - Escape HTML entities
  21. * (`true`) or not (`false` - default).
  22. *
  23. * @name ellipsis
  24. * @summary Restrict output data to a particular length, showing anything
  25. * longer with ellipsis and a browser provided tooltip on hover.
  26. * @author [Allan Jardine](http://datatables.net)
  27. * @requires DataTables 1.10+
  28. *
  29. * @returns {Number} Calculated average
  30. *
  31. * @example
  32. * // Restrict a column to 17 characters, don't split words
  33. * $('#example').DataTable( {
  34. * columnDefs: [ {
  35. * targets: 1,
  36. * render: $.fn.dataTable.render.ellipsis( 17, true )
  37. * } ]
  38. * } );
  39. *
  40. * @example
  41. * // Restrict a column to 10 characters, do split words
  42. * $('#example').DataTable( {
  43. * columnDefs: [ {
  44. * targets: 2,
  45. * render: $.fn.dataTable.render.ellipsis( 10 )
  46. * } ]
  47. * } );
  48. */
  49. jQuery.fn.dataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml ) {
  50. var esc = function ( t ) {
  51. return ('' + t)
  52. .replace( /&/g, '&' )
  53. .replace( /</g, '&lt;' )
  54. .replace( />/g, '&gt;' )
  55. .replace( /"/g, '&quot;' );
  56. };
  57. return function ( d, type, row ) {
  58. // Order, search and type get the original data
  59. if ( type !== 'display' ) {
  60. return d;
  61. }
  62. if ( typeof d !== 'number' && typeof d !== 'string' ) {
  63. if ( escapeHtml ) {
  64. return esc( d );
  65. }
  66. return d;
  67. }
  68. d = d.toString(); // cast numbers
  69. if ( d.length <= cutoff ) {
  70. if ( escapeHtml ) {
  71. return esc( d );
  72. }
  73. return d;
  74. }
  75. var shortened = d.substr(0, cutoff-1);
  76. // Find the last white space character in the string
  77. if ( wordbreak ) {
  78. shortened = shortened.replace(/\s([^\s]*)$/, '');
  79. }
  80. // Protect against uncontrolled HTML input
  81. if ( escapeHtml ) {
  82. shortened = esc( shortened );
  83. }
  84. return '<span class="ellipsis" title="'+esc(d)+'">'+shortened+'&#8230;</span>';
  85. };
  86. };