欢迎使用我们的软件！

Question

我想使用ajax，javascript和使用我的代码创建带有分页选项的数据表文件管理器，为此，在index.html中我已经放了这段代码：

<head> 
    <title></title> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="main.css" rel="stylesheet" />
    <link href="dataTables.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script> 
    <script src="Script.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="page.js"></script>
    <script src="datatables.js"></script>
    <script src="datatables.min.js"></script>
    <script src="main.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>

欢迎使用我们的软件！

<div id="body">
    <p>The page you are looking at is being generated dynamically by Navdisenyo Creations.</p>

    <p>If you would like to upload new data this page you'll contace with: navdisenyo.com</p>
    <div ng-controller="myController"> 

        <!-- start body -->

        <input type="text" placeholder="Search name" ng-model="searchText.name"/> 
        <input type="text" placeholder="Search city" ng-model="searchText.city"/>
        <input type="text" placeholder="Search district" ng-model="searchText.district"/>
        <input type="text" placeholder="Search Price" ng-model="searchText.salary"/>
        <input type="text" placeholder="Search type" ng-model="searchText.type"/>
        <input type="text" placeholder="Search wifi" ng-model="searchText.wifi"/>
        <input type="text" placeholder="Search room" ng-model="searchText.room"/>
            </br></br>
        <input type="text" placeholder="Search bedding" ng-model="searchText.bedding"/>
        <input type="text" placeholder="Search internet" ng-model="searchText.internet"/>
        <input type="text" placeholder="Search use of pool" ng-model="searchText.pool"/>
        <input type="text" placeholder="Search cable TV" ng-model="searchText.tv"/>
        <input type="text" placeholder="Search smoking allowed" ng-model="searchText.allowed"/>
        <input type="text" placeholder="Search garage" ng-model="searchText.garage"/>
        <input type="text" placeholder="Search car" ng-model="searchText.car"/>

<table id="example" class="display" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>Name</th>
            <th>city</th>
            <th>district</th>
            <th>salary</th>
            <th>type</th>
            <th>wifi</th>
        </tr>`enter code here`
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>city</th>
            <th>district</th>
            <th>salary</th>
            <th>type</th>
            <th>wifi</th>
        </tr>
    </tfoot>
    <tbody>

        <tr ng-repeat="employee in employees | filter: searchText : exactMatch">
            <td>{{ employee.name }}</td>
            <td>{{ employee.city }}</td>
            <td>{{ employee.district }}</td>
            <td>{{ employee.salary }}</td>
            <td>{{ employee.type }}</td>
        </tr>
    </tbody>
</table>
<!-- end body -->

并将以下代码放在.js文件中：

var app = angular .module("myModule", []) .controller("myController", function ($scope) 
{ var employees = [ 
{ name: "Rent", city: "Shyamnagar", district: "West Bengal", salary: "20000 inr", type: "Apportment", wifi: "No", room: "4 room", bedding: "3 bed", internet: "yes", pool: "no", tv: "yes", allowed: "no", garage: "yes", car: "yes" }, 
{ name: "Sell", city: "Shyamnagar", district: "West Bengal", salary: "10000 inr", type: "Apportment", wifi: "yes", room: "2 room", bedding: "2 bed", internet: "yes", pool: "no", tv: "yes", allowed: "no", garage: "yes", car: "yes" }, 
{ name: "Rent", city: "Ichapure", district: "West Bengal", salary: "15000 inr", type: "Office", wifi: "No", room: "3 room", bedding: "No bed", internet: "yes", pool: "no", tv: "yes", allowed: "no", garage: "yes", car: "yes" }, 
{ name: "Sell", city: "Palta", district: "West Bengal", salary: "20000 inr", type: "Apportment", wifi: "yes", room: "3 room", bedding: "2 bed", internet: "yes", pool: "yes", tv: "yes", allowed: "no", garage: "yes", car: "yes" }, 
{ name: "Rent", city: "Shyamnagar", district: "West Bengal", salary: "20000 inr", type: "Cottage", wifi: "No", room: "2 room", bedding: "1 bed", internet: "no", pool: "yes", tv: "no", allowed: "no", garage: "no", car: "no" }, 
{ name: "Sell", city: "Kolkata", district: "West Bengal", salary: "20000 inr", type: "office", wifi: "yes", room: "4 room", bedding: "No bed", internet: "yes", pool: "no", tv: "no", allowed: "no", garage: "no", car: "yes" }, 
{ name: "Rent", city: "Shyamnagar", district: "West Bengal", salary: "35000 inr", type: "Apportment", wifi: "No", room: "3 room", bedding: "2 bed", internet: "yes", pool: "no", tv: "yes", allowed: "no", garage: "yes", car: "yes" }, 
{ name: "Rent", city: "Shyamnagar", district: "West Bengal", salary: "30000 inr", type: "Apportment", wifi: "No", room: "3 room", bedding: "2 bed", internet: "yes", pool: "no", tv: "yes", allowed: "no", garage: "yes", car: "yes" }, 
{ name: "Sell", city: "Shyamnagar", district: "West Bengal", salary: "12600 inr", type: "Apportment", wifi: "No", room: "3 room", bedding: "2 bed", internet: "yes", pool: "no", tv: "yes", allowed: "no", garage: "yes", car: "yes" }, 
{ name: "Rent", city: "Shyamnagar", district: "West Bengal", salary: "25365 inr", type: "Apportment", wifi: "No", room: "3 room", bedding: "2 bed", internet: "yes", pool: "no", tv: "yes", allowed: "no", garage: "yes", car: "yes" }, 
{ name: "Sell", city: "Shyamnagar", district: "West Bengal", salary: "19874 inr", type: "Apportment", wifi: "No", room: "3 room", bedding: "2 bed", internet: "yes", pool: "no", tv: "yes", allowed: "no", garage: "yes", car: "yes" }, 
{ name: "Rent", city: "Delhi", district: "West Bengal", salary: "36548 inr", type: "cottage", wifi: "yes", room: "3 room", bedding: "2 bed", internet: "yes", pool: "no", tv: "yes", allowed: "no", garage: "yes", car: "yes" }, 
{ name: "Sell", city: "Shyamnagar", district: "West Bengal", salary: "54216 inr", type: "Apportment", wifi: "No", room: "3 room", bedding: "2 bed", internet: "yes", pool: "no", tv: "yes", allowed: "no", garage: "yes", car: "yes" }, 
{ name: "Rent", city: "Shyamnagar", district: "West Bengal", salary: "21546 inr", type: "Apportment", wifi: "No", room: "3 room", bedding: "2 bed", internet: "yes", pool: "no", tv: "yes", allowed: "no", garage: "yes", car: "yes" }, 

]; 
$scope.employees = employees; $scope.search = function (item) 
{ if ($scope.searchText == undefined) { return true; } else 
{ if (item.city.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1 || item.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1) 
{ return true; } } return false; }; });

现在过滤系统正常工作，但我无法创建分页。我会尝试这样做（https://datatables.net/examples/api/regex.html），但它不起作用。记得我想在我为数据搜索/过滤器创建的代码中加入分页。

请帮助我如何在我的代码中执行此操作。

如何使用ajax，javascript和html创建带分页选项的数据表文件管理器？

欢迎使用我们的软件！

0 个答案: