Question

对不起，如果已经问过类似的问题。

我想创建一个具有以下功能的HTML表：

如果myFunction未返回结果，则仅显示标题
有时myFunction返回一些需要在此表中显示的数据
表必须可调整大小，即当我们拖动窗口边框时，它会因此调整其边框大小，而无需重新行/列

这是我当前的表格：

<div id="result">
  <table id="myTable" class="display" style="width:100%">
    <tr>
      <th>Header1</th>
      <th>Header2</th>
      <th>Header3</th>
    </tr>
  </table>
</div>

JavaScript：

function myFunction() {
  $.ajax({
    type: "GET",
    url: 'some',
    dataType: 'json',
    data: parameters,
    success: function (response) {
      myTable.empty().show(); // to clear
      // html table content calculation...
      myTable.append(new html);
    }
  });
}

每次运行myFunction时，由于变量为空，我得到的表没有标题..但是，否则我不了解如何在不重新加载页面的情况下动态地更新内容。 >

Answer 1

如果您经过Datatable，那就更好了。在这里，您可以使用server-side processing，这是创建动态表的最佳方法。

Answer 2

将此代码放入HTML或PHP扩展中，然后运行Apache服务器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- NEED THE bootstrap.min.css AND jquery.resizableColumns.css TO RESIZE THE TABLE AUTO-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//dobtco.github.io/jquery-resizable-columns/dist/jquery.resizableColumns.css">
<!-- NEED THE jquery.min.js TO USE AJAX-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
<!-- GOT THE CODE OF RESIZE THE TABLE FROM https://codepen.io/validide/pen/aOKLNo/   HERE-->
https://codepen.io/validide/pen/aOKLNo/
table{
  table-layout: fixed;
  td, th{
    overflow: hidden;
    white-space: nowrap;
    -moz-text-overflow: ellipsis;        
       -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
           text-overflow: ellipsis;
  }
}
</style>
<script>
$(function() {
  $("table").resizableColumns({
    store: window.store
  });
});
</script>
</head>
<body>
<script type="text/javascript">
function updatecons() {
			$.ajax({
				url: "refresh.php", //THE PAGE THAT HAVE THE CODE AND BRING BACK AN OUTPUT
				success: function(response) {
					$('.container').html(response).fadeIn();//SET THE INFO GOTTEN INTO THE CLASS CONTAINER OF THE DIV
				}
			});

}
setInterval(updatecons, 1000);//It will RUN the function "updatecons" every second
		
</script>
<!-- THIS DIV WILL BE MODIFIED BY THE FUNCTION updatecons-->
<div class="container"></div>

</body>
</html>

该代码另存为refresh.PHP，因为它将调用第一页。此页面具有逻辑代码，第一页将调用它

<?php

if(FALSE){//CHANGE THE "FALSE" TO "TRUE" AND IT WILL SHOW A FULL TABLE DONE, OR CHANGE INTO A STATEMENT THAT CAN OR COULD BE TRUE, AND IT WILL SHOW UP
//CHANGE THE TABLE CONTENT IN THE WAY YOU NEED IT
echo'
<table class="table table-bordered" data-resizable-columns-id="demo-table-v2">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Nickname</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Dude Meister</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Barney von Matterhorn</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td colspan="2">Larry the Bird</td>
        <td>What</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
';	
}else{
echo'
<table class="table table-bordered" data-resizable-columns-id="demo-table-v2">
    <thead>
      <tr>
        <th>HEADER 1</th>
        <th>HEADER 2</th>
        <th>HEADER 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>NONE 1</td>
        <td>NONE 2</td>
        <td>NONE 3</td>

      </tr>
    </tbody>
  </table>
';
}
?>

创建具有动态更改内容的HTML表

2 个答案: