Question

我有以下数据表：

$('#tabelOferte').DataTable({
    "lengthMenu": [[10, 25, -1], [10, 25, "All"]],
    "aaSorting": [[0,'desc'], [0,'desc']],
    processing: true,
    serverSide: true,
    ajax: {
        "url":  'ajaxTabelOferte',
        "type": "GET",
    },
    columns: [
        {data:'id', name:'id', "visible": false,  "bSearchable": false },
        {data: 'number' ,name: 'numar'},  
        {data: 'actions', name: 'Actions', "bSearchable": false,
            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                $(nTd).html("<a href=edit/"+oData.id+">" + "<Edit>" + </a>"+
                    "&nbsp"+
                    "<a href=print/"+oData.id+">" + "Print" + "</a>"
                )
            },
        }
    ],
});

在最后一列中有2个链接。

我希望用户单击拳头链接（“编辑”）首先启动Java脚本功能以进行一些验证，并且前提是必须通过验证才能获得链接。

如果可以使链接更容易解决，则可以将链接放在单独的单元格中。

如何插入对Java脚本函数的调用？

谢谢您的时间！

Answer 1

您想在用户单击第一链接（编辑）时检查一些验证

解决方案：


首先，删除超链接href编辑链接

第二，在编辑链接click事件上应用函数以检查验证

检查以下代码：

$(document).ready(function () {
    redraw_exceptions(4)
})

function redraw_exceptions(week_limit) {

    var testdata = [{
        "col1": "1",
        "col2": "9908",
        "col3": "171.74",
    }, {
        "col1": "2",
        "col2": "9959",
        "col3": "156.83",
    }, {
        "col1": "3",
        "col2": "457",
        "col3": "153.83",
    }, {
        "col1": "4",
        "col2": "452",
        "col3": "147.73",
    }, {
        "col1": "5",
        "col2": "9927",
        "col3": "141.90",
    }];

    $('#testTable').DataTable({
        "aaData": testdata,
        columns: [
        { data: 'col1', name: 'col1', "visible": false, "bSearchable": false },
        { data: 'col2', name: 'col2' },
        {
            data: 'col3', name: 'col3', "bSearchable": false,
            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                $(nTd).html("<a href='javascript:void(0)' onclick='editValidate(" + oData.col1 + ")'>" + "Edit" + "</a>" +
                    "&nbsp" +
                    "<a href=print/" + oData.col1 + ">" + "Print" + "</a>"
                )
            },
        }
        ]
    });
}

function editValidate(editID) {
    alert('Checking some validations here for : ' + editID);
}

p{
color:red;
}

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<p>Click on "edit" link to check validation function below</p>

<table class="table" id="testTable">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
</table>

Answer 2

将点击处理程序添加到锚标记中，该标记会调用验证功能并返回结果

"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                $(nTd).html("<a href=edit/"+oData.id+
                    "onClick='return validate();'>" + "<Edit>" + </a>"+
                    "&nbsp"+
                    "<a href=print/"+oData.id+">" + "Print" + "</a>"
                )
            }

function validate(){
  // ...add validation logic here...
  // return as boolean
  return result
}

工作示例： https://jsfiddle.net/4vkne52u/

在进行超链接之前进行数据表验证

2 个答案: