Question

对于普通表数据，数据搜索工作正常。当Iam用Ajax填充表格主体时，搜索将无法进行。

我正在使用AJAX调用来填充表主体。如果有一些没有Ajax调用的虚拟数据，我的表搜索将很好地工作。在Ajax调用之后，搜索无法正常进行。

<!DOCTYPE html>
 <head>
  <meta charset="utf-8">

  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">


    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>

</head>
<body>
<table id="myTable" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </thead> 
    <tbody id="userdetails1">

    </tbody>
</table>
</body>

  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
  <script src="js/admin-dashboard.js"></script>
  <script>
    $(document).ready(function() {
        $('#myTable').DataTable();
    });
    $('#myTable input').on('keyup', function() {
        table.search(this.value).draw();
    });
  </script>
 </body>
</html>

Answer 1

The issue is not with your ajax calls 
rather it's with your data-table initializing

参考您的Codepen链接： https://codepen.io/jithendraathipatla/pen/JQMxvg?editors=1111

执行此操作：在document.ready中

$(document).ready(function() {
    $('#myTable').DataTable();
 function filterGlobal () {
    $('#myTable').DataTable().search(
        $('#global_filter').val(),

    ).draw();
}

function filterColumn ( i ) {
    $('#myTable').DataTable().column( i ).search(
        $('#col'+i+'_filter').val(),

    ).draw();
}

    $('input.global_filter').on( 'keyup click', function () {
        filterGlobal();
    } );

    $('input.column_filter').on( 'keyup click', function () {
        filterColumn( $(this).parents('tr').attr('data-column') );
    } );
} );

，然后在您的js文件中，将代码替换为：

var waitlistTable=[];
waitlistdatashow();
function waitlistdatashow(){
    console.log("hi");
    var data = {"hosted_event_id": "testkonfhub-php-ban963c6ec2",
    "user_id" : "1548232247"
     };
// document.getElementById("userdetails").innerHTML = "<i class=\"fa fa-refresh fa-spin\" style=\"font-size:48px\"></i> ";
    $.ajax({
    url: "https://mr6akjmp7f.execute-api.us-east-2.amazonaws.com/default/konfhub_event_display_wailist_details",
    type: "POST",
    data: JSON.stringify(data),
    dataType: "json",
    async:false,
    success: function (data) {

        console.log(data);

        waitlistTable=data.participant_details;
        console.log(waitlistTable);
        //document.getElementById("event_name1").innerHTML = waitlistTable.event_name;
        for(var i=0; i < waitlistTable.length; i++){
            $("#userdetails1").append(
               //"<th>Date & Time of Purchase</th>" +
                "<tr>"+
                "<td style='cursor: default'>" + waitlistTable[i].name + "</td>" +
                "<td style='cursor: default'>" +
                "    <span class=\"block-email\" >" + waitlistTable[i].email_id.slice(0, 25) + "</span>" +
                "</td>" +
                "<td class=\"desc\">" + waitlistTable[i].phone_number + "</td>" +
                "<td class=\"desc\">" + waitlistTable[i].organisation + "</td>" +
                 "<td class=\"desc\"  id=\"waitlisttext\" style=\"color:orange\">" + waitlistTable[i].ticket_status + "</td>" +
                // "<td><textarea  id=" + "lead_text".concat(no_of_participant) + " rows=\"1\" cols=\"50\" type=\"text\" style=\"width:100%;border: 1px solid lightslategrey;padding: 4px;border-radius: 4px;\" placeholder=\"write comments here..\">" + returnLeadText(king[no_of_participant].misc) + "</textarea></td>" +
               // "<td><span id=" + "approve".concat(no_of_participant) + " class='fas fa-check-circle click-check' onclick=\"approveWaitlist(" + no_of_participant + ")\" style=\"cursor:pointer;font-size: 25px;color:green\" data-toggle=\"tooltip\" title=\"Approve\">&nbsp&nbsp</span>"+
                //"<div id=" + "delete-waitlist".concat(no_of_participant) + " class='far fa-times-circle click-check1' onclick=\"deleteWaitlistRecord(" + no_of_participant + ")\" style=\"cursor:pointer; font-size: 25px;color:red\" data-toggle=\"tooltip\" title=\"Reject\"></div></td>" +
                "<\tr>"+
                "<hr>"


            );
            // if(waitlistTable[i].status=="ACTIVE"){
            //     document.getElementById("refundbtn".concat(i)).style.display = "block";
            //     document.getElementById("cancelbtn".concat(i)).style.display = "block";
    }
    $('#myTable').DataTable();
}
    });
}

搜索失败，使用AJAX调用

1 个答案: