代码之家 › 专栏 › 技术社区 › Radu

继续前的数据表验证

datatables-1.10 jquery javascript

Radu · 技术社区 · 6 年前

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

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

如果用户单击第一个链接(Edit)首先启动一个java脚本函数来进行一些验证,并且只有验证是确定的,才能获得链接。

谢谢你的时间!

2 回复 | 直到 6 年前

saAction 6 年前

解决方案:

首先,删除超链接 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>

Martin Öjes 6 年前

将click处理程序添加到 调用验证函数并返回结果

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