Question

我尝试初始化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>

出了什么问题？
是否需要表格结构？
是否需要数据？

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

Answer 1

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

jQuery（但是你要包含它）;
jquery.dataTables.js（或缩小版）。

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

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

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

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

Answer 2

要使用数据表，您有很多选择，一种可能性就是形成一个格式良好（使用<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>

Answer 3

您必须在javascript中调用dataTable函数

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

Answer 4

我研究了一整天。据说jQuery被大型使用人数，但我找不到一个说“什么”的“单一”博客所有“极少”的东西都要导入你的html / jsp for 利用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>

使用dataTable需要哪些文件？

4 个答案: