使用dataTable需要哪些文件

What files are required for using dataTable?

本文关键字：文件 dataTable 使用      更新时间：2023-09-26

我尝试初始化DataTable，但无法初始化。

<style type="text/css" title="currentStyle">
    @import "demo_page.css";
    @import "demo_table.css";
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dataTables.js"></script>

  1. 怎么了？

  2. 表格的结构是必需的吗？

  3. 是否需要数据？

<table id="example">    
    <thead>
       <tr>
           <th>Column 1</th>
       </tr>
    </thead>
    <tbody>
        <tr>
            <td>data</td>
        </tr>
    </tbody> 
</table>

您只需要两个文件即可初始化：

  1. jQuery（无论您希望如何包含它）；然后
  2. jquery.dataTables.js（或缩小版）

如果没有合适的CSS，你的表看起来会很疯狂（添加了各种跨度来方便排序图标），但它们不是必要的。它们只是风格。

如果它没有用这两个文件和$('#myTable').dataTable()调用（在文档就绪函数中）进行初始化，那么会发生其他事情，您需要查看JavaScript控制台，看看抛出了什么错误。

这是在他们的jsbin环境中：http://live.datatables.net/olofeg

没有CSS，只有两个JS文件，一个格式良好的表，并从文档就绪函数调用dataTable()。

要使用数据表，您有很多选择，一种可能性是使用格式良好的（带有<thead>和<tbody>）HTML表来"转换"

<style type="text/css" title="currentStyle">
    @import "demo_page.css";
    @import "demo_table.css";
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<table id="example">
   <thead>
       <tr>
           <th>Column 1</th>
       </tr>
    </thead>
    <tbody>
        <tr>
            <td>data</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
//initialize datatables
    (function($){
       $('#example').dataTable();
    });
 </script>

您必须在javascript 中调用dataTable函数

<script type="text/javascript">
    $(document).ready(function(){
        $("example").dataTable();
    });
</script>

我研究了一整天。据推测，jQuery被大型人数，但我找不到一个"单身"博客，上面写着要导入到您的html/jsp中的所有"最低限度"的东西利用jQuery数据表功能。。。因此，我将其编译成一个小的html页面，如下所示（这完全工作的东西，所以请从这里开始，按照自己的方式建造。）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>		
	<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
	<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
	<link rel="stylesheet" href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
	   
	<script type="text/javascript">
		$(document).ready(function () {
			$("#companies").dataTable({
				"sPaginationType": "full_numbers",
				"bJQueryUI": true
			});
		});
	</script>
</head>
	
    <body id="dt_example">
        <div id="container">
            <div id="demo_jui">
                <table id="companies" class="display">
                    <thead>
                        <tr>
                            <th>Company name</th>
                            <th>Address</th>
                            <th>Town</th>
                        </tr>
                    </thead>
                    <tbody>
						<tr>
							<th>Atlassian</th>
							<th>Paramatta</th>
							<th>Sydney</th>
						</tr>
						<tr>
							<th>Oracle</th>
							<th>Whitefield</th>
							<th>India</th>
						</tr>
                    </tbody>
                </table>
         </div>
        </div> 
    </body>
</html>

相关文章：