jquery 使用JavaScript将InputBox中的数据动态返回和显示到DataTable中

jmo0nnb3  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(116)

我能够根据来自服务器的值填充数据表。我能够正确地得到这些值,但是如果其中一个是null或undefined,那么整个表就会中断。我需要一个解决方案,我可以检查undefined或null,并避免打破表。

$.ajax({
        type: "POST",
        url: "../Controller/Action/",
        data: JSON.stringify(jsObject),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
           
            var clb = response;
            $("#tblReset").DataTable().clear();
            $('#tblReset tbody').empty();
            $("#tblReset").DataTable().destroy();
            $(clb).each(function (index) {
     
                var body = "";
                body += "<tr id='studentCell' >";
                body += "<td id='studentCell' style='display:none'>"+ this.Studentid + "</td>";
                body += "<td style='display:none'>" + this.Testid + "</td>";
                body += "<td>" + this.Name + "</td>";
                body += "<td>" + this.Surname + "</td>";
                body += "<td>" + this.ExamNo + "</td>";
                body += "<td>" + this.IDNumber + "</td>";
                body += "<td>" + this.TestName + "</td>";
                body += "<td>" + this.StartDate + "</td>";
                body += "<td>" + this.EndDate + "</td>";
                body += "<td>" + this.Description + "</td>";
                //body += "<td>" + this.TimeRemaining + "</td>";
                //body += "<td>" + "<input type='text' id='txtTimeRemaining' style='border-radius: 20px; padding: 10px; width: 150px; height: 1px;' class='form-control' value='" + this.TimeRemaining+"'>"+ "</td>";
                body += "<td>" +  "</td>";
                body += "<td>" + "<button id='btnUpdateTime' type='button'  style='width:100px' class='btn btn-block btn-primary glow'>Update Time</button>" + "</td>";
                body += "<td>" + "<button id='btnReset' type='button'  style='width:100px' class='btn btn-block btn-primary glow'>Reset</button>" + "</td>";
                body += "</tr>";

                $("#tblReset").append(body);

               
            });
            $('#tblReset').DataTable({
                "aaSorting": [],
                dom: 'Bfrtip',
                buttons: [
                    {
                        extend: 'excel',
                        title: 'IEBT Export',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7]
                        }
                    }
                ],

                columns: [
                    { 'data': 'Studentid'},
                    { 'Testid': 'Testid'},
                    { 'data': 'Name'},
                    { 'data': 'Surname'},
                    { 'data': 'ExamNo'},
                    //{ 'data': 'Studentid' },
                    { 'Studentid': 'Studentid' },
                    { 'data': 'TestName' },
                    { 'data': 'StartDate'},
                    { 'data': 'EndDate' },
                    { 'data': 'Description'},
                    {
                        'data': 'TimeRemaining',
                        "defaultContent": '<input id="txtTimeRemaining" class="form-control" type="text" value=""></input>',
                        "render": function (data, type, row) {
                            //if (TimRemaining != undefined && TimeRemaining !="" && TimRemaining != '') {
                            console.log(data);
                            console.log(row);
                            '<input id="txtTimeRemaining" class="form-control" type="text" value="' + data+'"></input>'
                            //}
                        },
                    }, 
                    {
                        'data': null,
                        "defaultContent": '<button id="btnUpdateTime" type="button" class="btn btn-block btn-primary glow" style="width:100px">Update Time</button>'
                    },
                    {
                        'data': null,
                        "defaultContent": '<button id="btnReset" type="button" class="btn btn-block btn-primary glow" style="width:100px">Reset</button>'
                    }

                ]
               // console.log(columns)
            });
xkrw2x1b

xkrw2x1b1#

如果遇到未定义或空值导致表中出现问题的问题,则应在将数据追加到表中之前处理这些问题。
您可以尝试初始化属性:

$(clb).each(function (index) {
    const studentId = this.Studentid || '';
    const testId = this.TestId || '';
    const name = this.Name || '';
    ....

    var body = "";
    body += "<tr id='studentCell' >";
    body += "<td id='studentCell' style='display:none'>" + studentId + "</td>";
    body += "<td style='display:none'>" + testId + "</td>";
    body += "<td>" + name + "</td>";
    ...
    body += "</tr>";

    $("#tblReset").append(body);
});

相关问题