Question

这里的任何人都可以帮我解决我的问题吗？

转换为AJAX之前：

转换为AJAX后：

你会注意到在第一张图片上有5,000多条记录，每个标签只有10条记录。在第二个图像上只有20个记录，但如果代码可以工作，它必须只显示每页10个记录。

我将在下面提供一个代码，以便您可以检查并告诉我错过了哪部分代码。

我的代码

view.php

＆＃13;

<script src="assets/js/jquery-1.10.2.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- DATA TABLE SCRIPTS -->
<script src="assets/js/dataTables/jquery.dataTables.js"></script>
<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
<script src="assets/js/table.js"></script>
<script type="text/javascript">
	function load(){
	    
	    // AJAX for loading view table
	    var xhttp = new XMLHttpRequest();
	    xhttp.onreadystatechange = function() {
	        if (this.readyState == 4 && this.status == 200) {
	            document.getElementById("loadTable").innerHTML = this.responseText;
	        }
	    };
	    xhttp.open("GET", "table/loadViewTable.php", true);
	    xhttp.send();
	}
</script>

＆＃13;

<body onload="load()">
<div class="panel-body">
	<div class="table-responsive">
	    <div id="loadTable" >
	        
	    </div>
	</div>                                                          
</div>
</body>

＆＃13;

loadViewTable.php

＆＃13;

<?php
	include_once '..\assets\function\retrieveFunction.php';
	$loadStudList = array();
    $loadStudList = currentEnrolledStudentsList();
?>
<table class="table table-striped table-bordered table-hover" id="claimTable">
    <thead>
        <tr>
            <th></th>
            <th>School Semester</th>
            <th>Student Number</th>
            <th>Lastname</th>
            <th>Firstname</th>
            <th>Middlename</th>
            <th>Suffixname</th>
            <th>Course</th>
            <th>Year Level</th>
            <th>Registration Date</th>
            <th>Encoder</th>
        </tr>
    </thead>
    <tbody>
    <?php
    	$i=0; 
    	for ($i=1;$i<=20;$i++){?>
    	<tr onclick="getClaimData()">
    		<td><?php echo $i;?></td>   		
    		<td>2017-2016-1</td>   		
    		<td>123456789</td>   		
    		<td>Doe</td>   		
    		<td>John</td>   		
    		<td>Anyone</td>   		
    		<td>NONE</td>   		
    		<td>BSMAR-E</td>   		
    		<td>4TH</td>   		
    		<td>12/11/2017</td>   		
    		<td>JOHN</td>   		
    	</tr>
    <?php
    	}
    ?>
    </tbody>
</table>

＆＃13;

目的是当我使用PHP + HTML加载5,000+记录时，我的PC需要10-15秒，而其他低端PC的加载时间需要20-30秒，但是当我使用AJAX时，加载所有记录只需3-5秒，但搜索栏和分页都缺失。

更新

我忘了添加此代码......

＆＃13;

function getClaimData(){

    var table = $('#claimTable').DataTable();
    $('#claimTable tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        document.getElementById("claimStudID").value = data[1];
        document.getElementById("claimStudLN").value = data[2];
        document.getElementById("claimStudFN").value = data[3];
        document.getElementById("claimStudMN").value = data[4];
        document.getElementById("claimSuffix").value = data[5];
        document.getElementById("claimStudCourse").value = data[6];
        document.getElementById("claimStudLevel").value = data[7];
    } );
}

＆＃13;

＆＃13; 在我输入查询后，所有表格都会显示，但没有搜索和分页，但是当我点击表格时，表格的所有功能都有效。

在点击表格之前

在

更新2：

为了更好的解释，我上传了我的文件。请测试一下 https://www.4shared.com/s/fHFrxPNtuca

Answer 1

一旦ajax调用完成，您可能需要重新初始化表：

if ($.fn.DataTable.isDataTable("#mytable")) {
    $('#mytable').DataTable().clear().destroy();
}

$("#mytable").dataTable();

有关详细信息，请参阅this answer

更改问题后的更新

你好像你的数据表加载正常，我可以看到分页。为了更好的方法，从服务器获取声明数据作为json，并让datatables为您加载表：

<强> claims.php

$claims_array = array(....);

header('Content-Type: application/json');
echo json_encode($claims_array);

<强> tables.js

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": '/claims.php' // This is from our json endpoint above
    });
});

请参阅Datatables的Ajax Sourced data

＆＃34;搜索＆＃34;和＃34;分页＆＃34;在转换为AJAX

1 个答案: