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

Question

I have the following datatable:

$('#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>"
                )
            },
        }
    ],
});

In the last column there are 2 links.

I want if the user click on the fist link (Edit) to first launch a java script function to make some validations and only if validations are OK to get the link.

It would be OK to put the links in separate cells if this could make the solution easier.

How do I insert the call for the java script function?

Thank you for your time!

Answer 1

You want to check some of validation while user click on the fist link (Edit)

Solution:

• First, Remove the hyperlink href edit link
• Second, Apply a function on edit link click event to check validation

Check below code:

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

Add a click handler to the anchor tag that calls the validation function and returns the result

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

Working example: https://jsfiddle.net/4vkne52u/