Question

我有一个简单的页面，点击链接左侧数据将显示在JSON右侧的表格中。我想找一个简单的方法来分页（也过滤），你知道哪个插件最适合我的情况。我使用过DataTable插件，但没有显示任何结果。

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">   
<link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet"> 
</head>
<body>
    <div class="container-fluid text-center">    
      <div class="row content">
       <div class="col-lg-2 sidenav">
      <a href="#" id="link3" class="list-group-item">Vertical link #3</a>
        </div>
        <div class="col-lg-10 text-left"> 
          <div class="row">
            <div class="col-lg-12" id="content"></div>
          </div>
        </div>
      </div>
    </div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- link3 -->
<script src="link3.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>

</html>

link3.js

$(document).ready(function(){
var table = $('</br><table><thead><tr><th>Name</th><th>Age</th><th>Position</th><th>Note</th></tr></thead><tbody></tbody></table>').addClass('table table-bordered table-hover search-table');
    $("#link3").on("click", function () {
      $('#content').html(table);
    $.ajax({
        url:'test.json',
        dataType:'json',
        type:'GET',
        Accept:"aplication/json",
        cache:false,
        success:function(data){
            $.each(data, function(index, item){
                var id = item.name;
                var id2= item.age;
                var id3=item.position;
                var id4=item.note;
                $(".table").append("<tr><td>"+id+"</td><td>"+id2+"</td><td>"+id3+"</td><td>"+id4+"</td></tr>");
            });
           $('.search-table').DataTable();
        },
        error:function(e){
            alert("there is some thing wrong!")
        }
    });
});

});

test.json

[

  {
    "name": "Olivia Doe",
    "age": "18",
    "position": "SW developer",
    "note": ""
  },
  {
    "name": "Sophia Doe",
    "age": "19",
    "position": "Graphic",
    "note": ""
  },
  {
    "name": "Ava Doe",
    "age": "20",
    "position": "Project manager",
    "note": ""
  },
  {
    "name": "Joshua Doe",
    "age": "21",
    "position": "Analyst",
    "note": ""
  },
  {
    "name": "Viktor Doe",
    "age": "22",
    "position": "Analyst",
    "note": ""
  },
  {
    "name": "Ahmed Doe",
    "age": "23",
    "position": "Analyst",
    "note": ""
  },
  {
    "name": "Emma Doe",
    "age": "24",
    "position": "Analyst",
    "note": ""
  },
  {
    "name": "Evelyn Doe",
    "age": "25",
    "position": "Analyst",
    "note": "Evelyn's work is always amazing!"
  },
  {
    "name": "Noah Doe",
    "age": "26",
    "position": "Analyst",
    "note": ""
  },
  {
    "name": "Liam Doe",
    "age": "27",
    "position": "Analyst",
    "note": ""
  },
  {
    "name": "Mason Doe",
    "age": "28",
    "position": "Analyst",
    "note": ""
  },
  {
    "name": "Jacob Doe",
    "age": "29",
    "position": "Project manager",
    "note": ""
  },
  {
    "name": "William Doe",
    "age": "30",
    "position": "Project manager",
    "note": ""
  },
  {
    "name": "Ethan Doe",
    "age": "18",
    "position": "Project manager",
    "note": "Great job Ethan\nas always!"
  },
  {
    "name": "James Doe",
    "age": "20",
    "position": "Project manager",
    "note": ""
  },
  {
    "name": "Alexander Doe",
    "age": "21",
    "position": "Project manager",
    "note": ""
  }
]

如何通过jquery对表进行分页？

0 个答案: