2014-04-04 133 views
0

我使用数据表来搜索content.but数据表着工作表中我的HTML代码
我要介绍的过滤和排序功能,以我的表。所有表库包含在HTML脚本数据表不能正常工作

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>Untitled Document</title> 
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> 

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

    <!-- DataTables --> 
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script> 
    </head> 

    <body> 
    <script type="text/javascript"> 
    $('table').dataTable(); 
    </script> 
    <table style="margin-top:100px"> 
    <thead> 
    <tr class='header'> 
    <th>Name</th> 
    <th>Party</th> 
    <th>Constituency</th> 
    <th>Gender</th> 
    </tr> 
    </thead> 
    <tbody><tr> 
    <th>pom</th> 
    <th>1</th> 
    <th>bachni</th> 
    <th>male</th> 
    </tr> 
    <tr> 
    <th>santosh</th> 
    <th>2</th> 
    <th>bachni</th> 
    <th>male</th> 
    </tr> 
    <tr> 
    <th>deepak</th> 
    <th>3</th> 
    <th>bachni</th> 
    <th>male</th> 
    </tr> 
    <tr> 
    <th>sudhir</th> 
    <th>1</th> 
    <th>savarde</th> 
    <th>male</th> 
    </tr> 
    </tbody> 
    </table> 
    </body> 
    </html> 
+2

如果您添加domready中事件? – BenM

+0

Thanx ..............太棒了!!!!!!!!!!!! – pramod24

+0

_...不工作 - - 简洁,准确,完全无用。解释发生了什么以及应该发生什么。 –

回答

1

试试这个代码现在工作的优良:

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>Untitled Document</title> 
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> 

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

    <!-- DataTables --> 
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script> 
    </head> 

    <body> 
    <script type="text/javascript"> 
    $('table').dataTable(); 
    </script> 
    <table style="margin-top:100px" class="table table-striped table-bordered datatable dataTable"> 
    <thead> 
    <tr class='header'> 
    <th>Name</th> 
    <th>Party</th> 
    <th>Constituency</th> 
    <th>Gender</th> 
    </tr> 
    </thead> 
    <tbody><tr> 
    <th>pom</th> 
    <th>1</th> 
    <th>bachni</th> 
    <th>male</th> 
    </tr> 
    <tr> 
    <th>santosh</th> 
    <th>2</th> 
    <th>bachni</th> 
    <th>male</th> 
    </tr> 
    <tr> 
    <th>deepak</th> 
    <th>3</th> 
    <th>bachni</th> 
    <th>male</th> 
    </tr> 
    <tr> 
    <th>sudhir</th> 
    <th>1</th> 
    <th>savarde</th> 
    <th>male</th> 
    </tr> 
    </tbody> 
    </table> 
<script> 
$(function() { 
     $('table').dataTable(); 
}); 
</script> 
    </body> 
    </html> 

please check this fiddle

2

由于放置了脚本的DOM之前,你需要把你的jQuery代码内DOM ready处理$(document).ready(function() {...});或较短的形式$(function(){...}):

这一步骤是用来确保所有您的DOM元素已经执行jQuery代码之前被加载到页面:

$(function() { 
    $('table').dataTable(); 
});