时间戳

首页 > 解决方案 > 数据表 mDataProp：val 参数未定义

datatables - 数据表 mDataProp：val 参数未定义

问题描述

我正在实现一个自定义过滤器值，其中现有的 html 标记被剥离每个适用的表列值。 （原因是过滤数据也考虑了 html 标签内的值，这是不希望的。）

这是一个遗留代码库，使用数据表 v1.9.0。

该表是使用参数构造的，例如 aoColumns、aaData。

对于表数据使用数组数组：即：

aaData = [
   ['12450','<a href='javascript:doStuff(123, 456)>value2</a>', 'User 1', '$500'],
   ['12455','...','...','...'],
   ['12462','...','...','...'],
   ['12314','...','...','...'],
   [...],
   ...
]

表必须mDataProp用于适用aTargets 的函数签名是：

tableOptions["aoColumnDefs"] = [
    {
        "mDataProp": function (source, type, val) {
            console.log("source ", val); // This returns: row array
            console.log("type ", type); // This returns each type (except for 'set')
            console.log("val ", val); // This returns: undefined
            var obj = {};
            var temp = angular.element('div');
            temp.innerHTML = val;
            if (type === 'set') {
                obj.value = val;
                obj.value_filter = temp.textContent || temp.innerText;
                console.log(obj.value_filter);
                return;
            } else if (type === 'filter') {
                return val;
            } else if (type === 'sort') {
                return val;
            }
            return obj.value;
        },
        "sDefaultContent": '',
        "aTargets": [ 1 ]
    },
]

问题是val里面的参数mDataProp总是返回undefined，所以如果不是sDefaultContent属性，表数据填充会出错。看到这个小提琴。

mDataProp为什么不能val填充参数？是否mDataProp支持数组数组作为数据源？（文档对此并不清楚）

标签： datatables

解决方案

经过一番挖掘，我发现当mDataProp用作函数时，它没有对从 javascript 数组变量传递给数据表的数据的任何引用，因此返回undefinedfor val。

这种特殊情况的解决方法是在source参数中使用直接数组位置引用，具体取决于aTargets要使用的值。（如果使用，则"aTargets": [ 1 ]必须调用函数）。source[1]mDataProp

我没有使用if (type === "set"){}，因为我无法访问它。

"mDataProp": function(source, type, val) {              
    var obj = {};
    obj.value = source[1];  // Set column value
    // Process value as desired ...
    obj.value_filter = obj.value + ' foobar';
    // Return value for filtering
    if (type === 'filter') {
      return obj.value_filter;
    }
    // Return original value for display, sort, etc.
    return obj.value;
}

单击更新的小提琴。

推荐阅读