2014-04-04 134 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(); 
});