Javascript 我想实现一个带有搜索和分页的树网格_Javascript_Html_Css

Javascript 我想实现一个带有搜索和分页的树网格

javascript html css

Javascript 我想实现一个带有搜索和分页的树网格,javascript,html,css,Javascript,Html,Css,我正在尝试实现一个具有树结构和分页功能的网格 <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>

我正在尝试实现一个具有树结构和分页功能的网格

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta charset="utf-8">   
<title>Example of Employee Table with twitter bootstrap</title>   
<meta name="description" content="Creating a Employee table with Twitter Bootstrap. Learn with  example of a Employee Table with Twitter Bootstrap.">  
<link href="content/css/bootstrap.css" rel="stylesheet"> 
<link href="content/css/bootstrap.min.css" rel="stylesheet">
<link href="content/css/bootstrap-theme.css" rel="stylesheet">
<link href="content/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="content/css/bootstrap-theme.css.map" rel="stylesheet">
<link href="content/css/bootstrap.css.map" rel="stylesheet">
<link rel="stylesheet" href="content/css/jquery.treegrid.css">


<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">  </style>


<title>Insert title here</title>
</head>
<body style="margin:20px auto">  

<div class="container">



<table id="myTable" class="table tree-2 table-bordered table-striped table-condensed">
            <tr class="treegrid-1">
                <td>Laxmi</td><td>Additional info</td>
            </tr>
            <tr class="treegrid-2 treegrid-parent-1">
                <td>Node 1-1</td><td>Additional info</td>
            </tr>
            <tr class="treegrid-3 treegrid-parent-1">
                <td>Node 1-2</td><td>Additional info</td>
            </tr>
            <tr class="treegrid-4 treegrid-parent-3">
                <td>Node 1-2-1</td><td>Additional info</td>
            </tr>
            <tr class="treegrid-5">
                <td>ashish</td><td>Additional info</td>
            </tr>
            <tr class="treegrid-6 treegrid-parent-5">
                <td>Node 2-1</td><td>Additional info</td>
            </tr>
            <tr class="treegrid-7 treegrid-parent-5">
                <td>Node 2-2</td><td>Additional info</td>
            </tr>
            <tr class="treegrid-8 treegrid-parent-7">
                <td>Node 2-2-1</td><td>Additional info</td>
            </tr>        
   </table>

</div>
</body>

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script type="text/javascript" src="content/js/bootstrap.js"></script>

<script type="text/javascript"   src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>


<script type="text/javascript" src="content/js/jquery.treegrid.js"></script>
    <script type="text/javascript" src="content/js/jquery.treegrid.bootstrap3.js"></script> 
    <script type="text/javascript">
        $(document).ready(function() {
            $('.tree').treegrid();
            $('.tree-2').treegrid({
                 expanderCollapsedClass: 'glyphicon glyphicon-chevron-right ',
                 expanderExpandedClass: 'glyphicon glyphicon-chevron-down '
            });

        });
    </script>


使用twitter引导的Employee表示例
在此处插入标题
LAXMI附加信息
节点1-1附加信息
节点1-2附加信息
节点1-2-1附加信息
其他信息
节点2-1附加信息
节点2-2附加信息
节点2-2-1附加信息
$（文档）.ready（函数（）{
$（'#myTable'）.dataTable（）；
});
$（文档）.ready（函数（）{
$（'.tree'）.treegrid（）；
$（'.tree-2'）.treegrid({
expanderCollapsedClass:“右侧字形图标字形图标”，
expanderExpandedClass:'glyphicon glyphicon V字形向下'
});
});

但它不起作用，最后一个为tree编写的脚本和另一个为datatable编写的脚本是一致的。这是我编写分页和搜索代码的链接。我想集成分页和树网格。有人能澄清一下，当两个脚本重叠时，以及为什么会发生这种情况。分页网格的链接和搜索

树网格的链接。

是的，我也需要这个网格，如果有任何解决方案，请帮助解决