html - 为什么下载 Excel、pdf 时 DataTables 不填写记录

Question

我想下载 excel pdf 并在我的 HTML 表中搜索项目。为此，我正在审阅这篇文章。

在这里，我添加了对我的 HTML 的所有引用

参考

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>

但它没有像预期的那样工作搜索文本框，并且在下载 Excel 或 PDF 时，它没有反映表格记录，它只显示<title>Mobile User Login</title>文本，为什么会这样？

jQuery

$(document).ready(function () {
    $('#displaytable').hide();
    $('#test').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    });

桌子

<table id="test" class="width100p borderTable table_new">
       <thead>
          <tr>
             <th></th>
          </tr>
       </thead>
</table>

AJAX 方法

var AllDataGrid = [];
function load_DataForGrid() {
    //debugger;
    var params = {
        UserName: $('#txtUserName').val(), UserID: $('#txtUserIDEdit').val(),
        Status: $('input[name="Status"]:checked').val()
    };
    $.ajax({
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(params),
        url: "MobileUser_Login.aspx/Get_Data",
        dataType: "json",
        async: false,
        success: function (result) {
            FunctionalDataForGrid(result.d)
            OnSuccessFunctionalGridCall();
        },
        error: function (err) { // Added this event to capture the failed requests.
            console.log(err);
        }
    });

    function FunctionalDataForGrid(pdata) {
        AllDataGrid = pdata;
    }
    function OnSuccessFunctionalGridCall(data, status) {
        //d = data.GetDraftedSDDResult.ResultObject;
        d = AllDataGrid;
        var tbl = "<table id='lineItemTable' border='1' cellspacing='0' cellpadding='3' width='100%'>";
        if ($('#test').length != 0)  // remove table if it exists              
        { $('#test').empty(); }

        if (d.length == 0) {
            alert('No Record to display');
        }
        else {

            tbl += "<tr class='tr-Highlighted' style='height:30px;'><td class='align-text-center' >Sr.No</td><td class='align-text-center' style='font-weight:bold !important'>User Login</td><td id='tdUserName' class='align-text-center' style='font-weight:bold !important'>User Name</td><td class='align-text-center' style='font-weight:bold !important'>Status</td><td class='align-text-center' style='font-weight:bold !important'>Action</td></tr>";

            for (i = 0; i < d.length; i++) {
                tbl += "<tr><td class='width4p align-text-center'>"
                    + (i + 1) + "</td><td class='width10p'>"
                    + d[i].USER_LOGIN + "</td><td class='width24p'>"
                    + d[i].USER_NAME + "</td><td class='width14p'>"
                    + d[i].Status + "</td><td class='width4p'>" +
                    "<a href='#my_modal' data-toggle='modal' class='open-AddBookDialog' data-book-id='my_id_value'><img src='Images/edit.png' height='20' width='20'></a>&nbsp&nbsp&nbsp&nbsp<a href='#my_modal' class='delete-Record'><img src='Images/delete.png' height='18' width='18'></a></td>";
            }
            $("#test").append(tbl);
            $('#hdnReworkStatusData').val(tbl);
            Paggination();
            return;
        }
    }
    return false;
};

Web 方法返回数据样本

渲染屏幕看起来像

我正在使用 AJAX 调用绑定我的表。单击 Excel 或 PDF 文件正在下载但它不包含表格数据，它只是显示我的表单标题文本。我不明白为什么会这样 <title> Some Text </title>

JSON数据

标签： htmljquerydatatables