在继续超链接之前验证数据表

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 link。

如果用户点击拳头 link（编辑），我希望首先启动一个 java 脚本函数来进行一些验证，并且仅当验证正常时才能获得 link.

如果可以使解决方案更容易，那么将 link 放在单独的单元格中是可以的。

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

感谢您的宝贵时间！

Answer 1

您想在用户单击拳头时检查一些验证 link（编辑）

Solution:

First, Remove the hyperlink href edit link

Second, Apply a function on edit link click event to check validation

检查以下代码：

$(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

向锚标记添加点击处理程序，调用验证函数并returns结果

"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/

在继续超链接之前验证数据表

Data tables validation before going on hyperlink

javascript

jquery

datatables-1.10