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

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

您想在用户单击第一个链接(编辑)时检查一些验证

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>