Question

我想为j Query datable编写一个mRender函数来提供和隐藏输入数据的链接。

我有2列，其中一列用于描述，另一列用于卡号。现在，当我从Ajax调用中获取卡号时，我需要有一个show和hide链接第二栏，显示卡号。

填充数据时，应显示显示链接 -

点击此链接应该显示隐藏链接 -

我是这个j查询和java脚本的新手。

非常感谢任何帮助。感谢

function DisplayCardList() {
    oTable = $('#cardTable').dataTable({
        "aaData": cardList,
        "aoColumnDefs": [
            {
                "aTargets": [0],
                "sClass": "Card Name",
                "mData": "description"


            },
            {
                "aTargets": [1],
                "sClass": "CardNumber", 
                //I need to write the function here..
            }
        ]
    });
    $('#cardTable').show();
}

Answer 1

当我正确地得到你的问题时，你需要一个函数来掩盖一个给定的数字 - 这就是这样的（正则表达式取决于你的数字格式 - 你可能可以使用一个简单的{{1}而不是）：

substr

接下来，您需要将屏蔽数字和原始数字添加到HTML容器中，点击后您需要切换数字的显示：

var mask_cc_number = function(cc,masked_char) {

    var masked_char = masked_char || '*',   /* the char using to mask */
        pattern = /^([0-9-]+)([0-9]{4})$/,  /* regex for the given number */
        matches = cc.match(pattern);        /* using the regex */

    return cc.replace(                     
        /([0-9])/g,
        masked_char,
        matches[1]) + matches[2];
    }

我将它放在一个小的jsfiddle中进行演示。

Answer 2

我将使用本机JS，因为我不了解jQuery，但这似乎是最简单的方法，因为你确切地知道你正在屏蔽什么，以及你想要什么显示。

＆＃13;

function showData(id){
  alert(document.getElementById(id).getAttribute('data-data'));
}
function toggleData(id){
    var elem = document.getElementById(id);
    // If masked
    if(elem.innerHTML.indexOf("XXXX") > -1){
        elem.innerHTML = elem.getAttribute("data-data");
    }
    // Else mask it
    else{
        elem.innerHTML = "XXXX-XXXX-" + elem.getAttribute("data-data").substr(-4);
    }
}

＆＃13;

<div id="maskedInfo" data-data="1234-5678-9012">XXXX-XXXX-9012</div>
<button onclick="showData('maskedInfo')">Show Data</button>
<button onclick="toggleData('maskedInfo')">Toggle Data</button>

＆＃13;

基本上只是将未屏蔽的数据存储在data-*属性中，并从中读取。您也可以使用类似的方法来切换显示的内容。

Answer 3

这将在表格单元格中显示“显示”链接：

'mRender': function (data, type, full) {
          return '<span class=\'hidden\'>' + full[0].substring(full[0].length - 4) + '</span>' +
           '<a href=\'javascript:;\' class=\'hidden\' id=\'hide\'>Hide</a>' +
           '<a href=\'javascript:;\' id=\'show\'>Show</a>';
}

javascript点击事件来处理显示/隐藏

$(document).on("click", "a.show", function (e) {
    // get the clicked object
    var lnk = $(this);
    // toggle its visibility (ie hide the 'Show' link)
    lnk.toggle();
    // toggle visibility of previous element(ie show the 'Hide' link)
    lnk.prev().toggle();
    // toggle visibility of previous element(show the span tag containing the card no)
    lnk.prev().prev().toggle();

});

这是一个非常'粗糙＆amp;准备好的例子，但它应该让你开始，因为你是jquery的新手，希望不难理解。如果这符合您的要求，那么我们可以对其进行改进我会提到卡片号码的存储会有法律含义（即除非你满足某些要求，否则你不应该这样做），但我猜这只是一个练习。

我需要屏蔽收到的号码并只显示最后4位数字？

3 个答案: