2016 年 2 月 26 日星期五

省略号渲染器

在使用 DataTables 的过程中，将出现从源信息获取的数据并非您希望向最终用户显示的格式的情形。为此，DataTables 通过 columns.render 支持数据渲染器。此选项可以用作执行数据转换的函数（这是一种 Javascript 函数，所以您可以做任何事情！），并且每当 DataTables 需要该单元格的数据时都会调用此函数。实际上，此选项也是 DataTables 提供其正交数据支持的方式。

以下是渲染器可以派上用场的几种用例

将日期/时间转换为本地格式
对数字进行格式化以显示货币、可读性和精确度
安全性以防止 XSS 攻击
缩短长字符串

本文将详细介绍渲染器的操作方式，并可以通过实现上述列表中的最后一个选项作为示例进行构建：长文本将使用省略号显示为简短文本，以表示文本已被截断。

示例

下表显示了一个示例 - 第一列在第 10 个字符处使用省略号，并且不允许拆分单词，而第二列在第 15 个字符处使用省略号，并且允许在单词中途截断。示例表还启用了响应式。

名称	职位	办公室	年龄	开始日期	薪水
Tiger Nixon	系统架构师	爱丁堡	61	2011-04-25	$320,800
Garrett Winters	会计师	东京	63	2011-07-25	$170,750
Ashton Cox	初级技术作者	旧金山	66	2009-01-12	$86,000
Cedric Kelly	高级 Javascript 开发人员	爱丁堡	22	2012-03-29	$433,060
Airi Satou	会计师	东京	33	2008-11-28	$162,700
Brielle Williamson	集成专家	纽约	61	2012-12-02	$372,000
Herrod Chandler	销售助理	旧金山	59	2012-08-06	$137,500
Rhona Davidson	集成专家	东京	55	2010-10-14	$327,900
Colleen Hurst	Javascript 开发人员	旧金山	39	2009-09-15	$205,500
Sonya Frost	软件工程师	爱丁堡	23	2008-12-13	$103,600
Jena Gaines	办公室经理	伦敦	30	2008-12-19	$90,560
Quinn Flynn	支持主管	爱丁堡	22	2013-03-03	$342,000
Charde Marshall	区域总监	旧金山	36	2008-10-16	$470,600
Haley Kennedy	高级营销设计师	伦敦	43	2012-12-18	$313,500
Tatyana Fitzpatrick	区域总监	伦敦	19	2010-03-17	$385,750
Michael Silva	营销设计师	伦敦	66	2012-11-27	$198,500
Paul Byrd	首席财务官 (CFO)	纽约	64	2010-06-09	$725,000
Gloria Little	系统管理员	纽约	59	2009-04-10	$237,500
Bradley Greer	软件工程师	伦敦	41	2012-10-13	$132,000
Dai Rios	人事主管	爱丁堡	35	2012-09-26	$217,500
Jenette Caldwell	开发主管	纽约	30	2011-09-03	$345,000
Yuri Berry	首席营销官 (CMO)	纽约	40	2009-06-25	$675,000
Caesar Vance	售前支持	纽约	21	2011-12-12	$106,450
Doris Wilder	销售助理	悉尼	23	2010-09-20	$85,600
Angelica Ramos	首席执行官 (CEO)	伦敦	47	2009-10-09	$1,200,000
加文·乔伊斯	开发人员	爱丁堡	42	2010-12-22	$92,575
珍妮弗·张	区域总监	新加坡	28	2010-11-14	$357,650
布伦登·瓦格纳	软件工程师	旧金山	28	2011-06-07	$206,850
菲奥娜·格林	首席运营官(COO)	旧金山	48	2010-03-11	$850,000
Shou Itou	区域营销	东京	20	2011-08-14	$163,000
米歇尔·豪斯	集成专家	悉尼	37	2011-06-02	$95,400
苏琪·伯克斯	开发人员	伦敦	53	2009-10-22	$114,500
普雷斯科特·巴特利特	技术作者	伦敦	27	2011-05-07	$145,000
加文·科尔特斯	团队领导	旧金山	22	2008-10-26	$235,500
马尔蒂娜·麦考瑞	售后支持	爱丁堡	46	2011-03-09	$324,050
尤尼蒂·巴特勒	营销设计师	旧金山	47	2009-12-09	$85,675
霍华德·哈特菲尔德	办公室经理	旧金山	51	2008-12-16	$164,500
霍普·富恩特斯	秘书	旧金山	41	2010-02-12	$109,850
维维安·哈雷尔	财务主管	旧金山	62	2009-02-14	$452,500
蒂莫西·穆尼	办公室经理	伦敦	37	2008-12-11	$136,200
杰克逊·布拉德肖	总监	纽约	65	2008-09-26	$645,750
奥利维娅·梁	支持工程师	新加坡	64	2011-02-03	$234,500
布鲁诺·纳什	软件工程师	伦敦	38	2011-05-03	$163,500
樱花山本	支持工程师	东京	37	2009-08-19	$139,575
托尔·沃尔顿	开发人员	纽约	61	2013-08-11	$98,540
芬恩·卡马乔	支持工程师	旧金山	47	2009-07-07	$87,500
塞尔日·鲍德温	数据协调员	新加坡	64	2012-04-09	$138,575
塞纳达·弗兰克	软件工程师	纽约	63	2010-01-04	$125,250
佐里塔·塞拉诺	软件工程师	旧金山	56	2012-06-01	$115,000
珍妮弗·阿科斯塔	初级 Javascript 开发人员	爱丁堡	43	2013-02-01	$75,650
卡拉·史蒂文斯	销售助理	纽约	46	2011-12-06	$145,600
赫敏·巴特勒	区域总监	伦敦	47	2011-03-21	$356,250
莱尔·格里尔	系统管理员	伦敦	21	2009-02-27	$103,500
乔纳斯·亚历山大	开发人员	旧金山	30	2010-07-14	$86,500
沙德·德克尔	区域总监	爱丁堡	51	2008-11-13	$183,000
迈克尔·布鲁斯	Javascript 开发人员	新加坡	29	2011-06-27	$183,000
唐娜·斯奈德	客户支持	纽约	27	2011-01-25	$112,000
名称	职位	办公室	年龄	开始日期	薪水

简易渲染器

我们从考虑最简单的情况入手 - 一个 HTML 源表，其中我们希望将第一列的字符数限制为不超过十个字符

$('#myTable').DataTable( {
    columnDefs: [ {
        targets: 0,
        render: function ( data, type, row ) {
            return data.substr( 0, 10 );
        }
    } ]
} );

上面的代码在 #myTable 元素上创建了一个 DataTable，columnDefs 用于仅为第一列分配列选项 (columnDefs.targets)。这里的重要部分是使用渲染函数 - columns.render。我们使用 substr() 将数据限制为仅 10 个字符。

此操作实施起来很简单，但有一些问题

没有向最终用户指示数据已被截断
搜索和排序数据也将被截断。

让我们依次解决 - 要向最终用户指示数据已被截断，我们使用省略号 (…)。对字符串是否会被截断进行一次简单检查，这让我们能够决定是否应该添加省略号

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

为了解决第二个问题，我们可以使用传递给该函数的第二个参数，即 DataTables 的正交数据类型指示符 - 只有当它为 display 时，我们才希望显示省略号。现在我们有

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

简单！

可重用渲染器

上方是几行简单的代码，但是如果您正在处理任何具有多个页面的网站，您将希望遵循良好的软件开发的 DRY（不要重复自己）原则。

由于函数是 Javascript 中的一等元素，我们可以将渲染函数存储在变量中，然后根据需要将其分配给 columns.render 选项。DataTables 提供了一个对象，该对象可用作存储所有渲染器的公共位置：DataTable.render。

如果我们继续我们的省略号示例，我们可能会拥有

DataTable.render.ellipsis = function () {
    return function ( data, type, row ) {
        return type === 'display' && data.length > 10 ?
            data.substr( 0, 10 ) +'…' :
            data;
    }
};

然后，要将其与 DataTables 一起使用，我们可以使用

$('#myTable').DataTable( {
    columnDefs: [ {
        targets: 0,
        render: DataTable.render.ellipsis()
    } ]
} );

然后该渲染函数可用于多个表格和多个页面 - 只需将渲染器代码保存到加载到您的页面上的文件中（例如 dataTables.plugins.js）。

配置选项

您会注意到我们定义的 ellipsis 是返回一个函数的函数 - 在这个简单的案例中没什么用，但对于更复杂的情况，保持着DRY（Don't Repeat Yourself）的概念，外函数可用来配置渲染器。以 ellipsis 示例为例，此功能可以定义要显示的字符数，例如

DataTable.render.ellipsis = function ( cutoff ) {
    return function ( data, type, row ) {
        return type === 'display' && data.length > cutoff ?
            data.substr( 0, cutoff ) +'…' :
            data;
    }
};

现在渲染器可用来定义如下所示的字符数

render: DataTable.render.ellipsis( 10 )
render: DataTable.render.ellipsis( 15 )
render: DataTable.render.ellipsis( 20 )
etc

即使在不需要配置选项的情况下，最好使用容器函数来保持一致性。大多数渲染函数确实需要某种配置，因此将所有渲染插件呈现为需要执行的函数会更简单。

省略号渲染插件

现在创建 DataTables 渲染插件的基础已经打牢，让我们构建省略号插件，用以下功能提供更大的实用性

可变长度截断
在工具提示中显示完整字符串
选择拒绝在单词中间断开
可以转义 HTML 以确保 XSS 安全性

以下函数提供了所有这些功能

DataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml ) {
    var esc = function ( t ) {
        return t
            .replace( /&/g, '&amp;' )
            .replace( /</g, '&lt;' )
            .replace( />/g, '&gt;' )
            .replace( /"/g, '&quot;' );
    };

    return function ( d, type, row ) {
        // Order, search and type get the original data
        if ( type !== 'display' ) {
            return d;
        }

        if ( typeof d !== 'number' && typeof d !== 'string' ) {
            return d;
        }

        d = d.toString(); // cast numbers

        if ( d.length < cutoff ) {
            return d;
        }

        var shortened = d.substr(0, cutoff-1);

        // Find the last white space character in the string
        if ( wordbreak ) {
            shortened = shortened.replace(/\s([^\s]*)$/, '');
        }

        // Protect against uncontrolled HTML input
        if ( escapeHtml ) {
            shortened = esc( shortened );
        }

        return '<span class="ellipsis" title="'+esc(d)+'">'+shortened+'&#8230;</span>';
    };
};

分解函数后，您将能够看到上面的是相当基础的 Javascript。只有 display 数据类型会截断其长度（如上所述），且仅处理字符串。字符串截断后，如果启用了“不换行”选项，正则表达式将用于截取最后一个单词。最后，返回一个 span，该 span 包含使用省略号缩短的字符串以及由 title 属性提供的浏览器工具提示（如果您愿意，您也可以使用 Javascript 工具提示库）。

源代码

省略号数据渲染器在其插件页面上有详细说明，并且可以在 DataTables CDN 上获得（请注意，您可能希望将多个插件合并到单个文件中以提高加载效率）

还可以在 GitHub 上找到源代码，并且始终欢迎您提出改进的拉取请求。

共享插件

如果您创建了一个想要与 DataTables 社区共享的渲染插件 - 首先 - 感谢您！请将拉取请求发送到 DataTables 插件存储库的 dataRender 目录。还应包括一个文档块来详细说明插件的作用及其使用方法（请参考现有插件获取模板）。

尽情享受！