数据表搜索数据正确，但是当我从搜索框中删除搜索文本时，数据表中没有再次出现

Question

  <table id="example1" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Vendor Code</th>
                                <th>Vendor Name</th>
                                <th>Vendor Type</th>
                                <th>Credit Days</th>
                                <th  width="4px">Edit</th>
                                <th  width="4px">Delete</th>
                            </tr>
                        </thead>
                        <tbody id="VendorList"></tbody>

                    </table>

这是我的 ajax 调用搜索框工作正常，但是当我从搜索框中删除文本时，它的表没有再次填充数据 我不知道里面发生了什么 需要帮助！

    $.get("/Vendor/GetVendorList", null, DataBind);
    function DataBind(VendorList) {
        var setdata = $("#VendorList");
        for (var i = 0; i < VendorList.length; i++) {
            var Data = "<tr 'class='row" + VendorList[i].VendorID + "'>" +
                 "<td>" + VendorList[i].VendorCode + "</td>" +
                "<td>" + VendorList[i].VendorName + "</td>" +
                 "<td>" + VendorList[i].VendorType + "</td>" +
                  "<td>" + VendorList[i].CreditDays + "</td>" +
                 " <td>" + "<a href='/vendor/Addvendor/?VendorID=" + VendorList[i].VendorID + "'><span class='glyphicon glyphicon-pencil'></span></a>" + " </td>" +
                 " <td>" + "<a href='/vendor/deleterecord/?DeleteId=" + VendorList[i].VendorID + "' ><span class='glyphicon glyphicon-trash'></span></a>" + " </td>" +
            "</tr>";
            setdata.append(Data);
            $("#example1").DataTable();
        }
    }

</script>

这是我的控制器

 public JsonResult GetVendorList()
    {
        List<VendorViewModel> ven = ObjModel.Vendors.Select(x => new VendorViewModel
        {
            VendorID = x.VendorID,
            VendorName = x.VendorName,
            VendorType = x.VendorType,
            VendorCode = x.VendorCode,
            VendorEmail = x.VendorEmail,
            VendorPhoneNo = x.VendorPhoneNo,
            VendorMobileNo = x.VendorMobileNo,
            VendorAddress = x.VendorAddress,
            CreditDays = x.CreditDays,
            IsActive = x.IsActive,
            Website = x.Website,
            IsDelete = x.IsDelete,
            UserID = x.UserID,
            ComapnyId = x.ComapnyId
        }).ToList();
        return Json(ven, JsonRequestBehavior.AllowGet);
    }

这是我的数据来自的 JSON 方法

Answer 1

首先清除表格的所有行。你每次都在追加。

$('#example1 tbody').empty();

另外，您不需要在循环中将每次表指定为 DataTable。

$.get("/Vendor/GetVendorList", null, DataBind);
    function DataBind(VendorList) {
        $('#example1 tbody').empty();
        var setdata = $("#VendorList");
        for (var i = 0; i < VendorList.length; i++) {
            var Data = "<tr 'class='row" + VendorList[i].VendorID + "'>" +
                 "<td>" + VendorList[i].VendorCode + "</td>" +
                "<td>" + VendorList[i].VendorName + "</td>" +
                 "<td>" + VendorList[i].VendorType + "</td>" +
                  "<td>" + VendorList[i].CreditDays + "</td>" +
                 " <td>" + "<a href='/vendor/Addvendor/?VendorID=" + VendorList[i].VendorID + "'><span class='glyphicon glyphicon-pencil'></span></a>" + " </td>" +
                 " <td>" + "<a href='/vendor/deleterecord/?DeleteId=" + VendorList[i].VendorID + "' ><span class='glyphicon glyphicon-trash'></span></a>" + " </td>" +
            "</tr>";
            setdata.append(Data);
        }
        $("#example1").DataTable();
    }