EasyNVR攝像機網頁無插件直播方案H5前端構建之：使用BootstrapPagination以分頁形式展現數據信息

背景介紹

EasyNVR核心在於攝像機的音視頻流的獲取、轉換、轉碼與高性能分發，同時同步完成對實時直播流的錄像存儲，在客戶端（PC瀏覽器、Android、iOS、微信）進行錄像文件的檢索、回放和下載。

在保證EasyNVR和前端設備之間網絡相通的基礎條件下，EasyNVR經過獲取數字網絡攝像機視頻流完成音視頻的採集，而後由EasyNVR內部實現流媒體協議轉換、轉碼和流媒體分發工做，最終能夠分發出RTMP、HTTP-FLV和HLS流，EasyNVR自身也能夠對實時視頻流進行存儲和管理，同時EasyNVR自身也會提供一套可供各類平臺、開發語言進行二次開發的HTTP接口，這樣能夠更加方便地與客戶的業務系統相結合，達到更加豐富的管理功能。

問題分析

上一篇介紹經過接口來獲取數據，本篇將介紹如何以分頁形式展現出接口獲取到的數據

經過接口獲取到的數據每每會不少，爲了追求頁面的美觀和方便用戶檢索，須要進行分頁展現。EasyNVR可接入多通道，當咱們的通道愈來愈多，一通篇的展現全部通道，不只不方便用戶的檢索，對於頁面的美觀來講也不是很適合。

實際操做（以EasyNVR前端分頁來進行演示）：
使用BootstrapPagination首先須要進入相應的js文件(還有其餘引用看具體的項目需求)，

- 須要引入的控件

<link type="text/css" href="@@docroot/adminlte-2.3.6/plugins/bootstrap-pagination/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8" src="@@docroot/adminlte-2.3.6/plugins/bootstrap-pagination/bootstrap.min.js"></script>
<link rel="stylesheet" href="@@docroot/adminlte-2.3.6/plugins/bootstrap-pagination/bootstrap-pagination.css" />
<script src="@@docroot/adminlte-2.3.6/plugins/bootstrap-pagination/bootstrap-pagination.js"></script>

- HTML代碼

<div class="ports box">
    <div class="box-header">
        <h4 class="text-success text-center">通道列表</h4>
        <div class="form-inline">
            <input type="text" class="form-control pull-right" placeholder="搜索" id="search" onkeyup="searchChannel()" ><!-- <i class="fa fa-search"></i> -->
        </div>
    </div>
    <div class="box-body">
        <table class="table table-striped pointer" >
        </table>
    </div>
    <div class="box-footer clearfix">
        <nav class='pull-right'>
            <ul class='pagination pagination-sm'></ul>//分頁展現的位置
        </nav>
    </div>
</div>

- JS代碼（經過程序代碼來設置分頁參數）

function renderPortPage(ports){
    function pageChanged(pageIndex,size){  //size 是 pageSize
        var $t = $(".ports .box-body table");
        var _ids = ports.slice(pageIndex*size, pageIndex*size + size);
        $(".box-body table tr").remove();
        if(_ids.length == 0){
            $t.append("<tr><td>沒有數據</td></tr>");
        }
        $.each(_ids,function(i,id){
            var $tr = $("<tr alt='{channel}' title='{Name}' role='button'><td class='text-success'> &nbsp;&nbsp;<i class='fa fa-folder'></i> &nbsp;&nbsp;{Name}</td></tr>".format({channel:id.Channel,Name:id.Name}));
            $t.append($tr);
        })
    }
    var pager = BootstrapPagination($(".ports .box-footer nav ul"),{
        layoutScheme: "firstpage,pagenumber,lastpage",
        total : ports.length,
        pageGroupSize : 3,
        pageSize : 8,
        firstPageText : '首頁',
        lastPageText : '尾頁',            
        pageChanged : pageChanged
    })
	    pager.pageIndex(0);//分頁索引值
}

ports：是通過處理事後須要使用的對象數據；
layoutScheme: 「firstpage,pagenumber,lastpage」,//須要的分頁樣式展現的項目；
total : ports.length,//須要分頁的數據總數；
pageGroupSize : 3,//默認顯示的分頁選擇個數

pageSize : 8,//每頁展現條數；
firstPageText : ‘首頁’,//定義標籤樣式；
lastPageText : ‘尾頁’, //定義標籤樣式；
pageChanged : pageChanged//調用函數

能夠根據本身的項目需求來定義其餘一些樣式

• 其餘組件：

  layoutScheme:"lefttext,pagesizelist,firstpage,prevgrou	ppage,
    prevpage,pagenumber,nextpage,nextgrouppage,lastpage,
    pageinput,righttext",
    
  
   //記錄總數。
  
        total: 101,
        //分頁尺寸。指示每頁最多顯示的記錄數量。
        pageSize: 20,
        //當前頁索引編號。從其開始（從0開始）的整數。
        pageIndex: 2,
        //指示分頁導航欄中最多顯示的頁索引數量。
        pageGroupSize: 5,
        //位於導航條左側的輸出信息格式化字符串
        leftFormateString: "本頁{count}條記錄/共{total}條記錄",
        //位於導航條右側的輸出信息格式化字符串
        rightFormateString: "第{pageNumber}頁/共{totalPages}頁",
        //頁碼文本格式化字符串。
        pageNumberFormateString: "{pageNumber}",
        //分頁尺寸輸出格式化字符串
        pageSizeListFormateString: "每頁顯示{pageSize}條記錄",
        //上一頁導航按鈕文本。
        prevPageText: "上一頁",
        //下一頁導航按鈕文本。
        nextPageText: "下一頁",
        //上一組分頁導航按鈕文本。
        prevGroupPageText: "上一組",
        //下一組分頁導航按鈕文本。
        nextGroupPageText: "下一組",
        //首頁導航按鈕文本。
        firstPageText: "首頁",
        //尾頁導航按鈕文本。
        lastPageText: "尾頁",
        //設置頁碼輸入框中顯示的提示文本。
        pageInputPlaceholder: "GO",
        //接受用戶輸入內容的延遲時間。單位：毫秒
        pageInputTimeout: 800,
        //分頁尺寸列表。
        pageSizeList: [5, 10, 20, 50, 100, 200],

EasyNVR應用場景

EasyNVR能夠說已經成爲國內視頻互聯網化基礎建設的排頭兵，幾乎各個民生行業都已經有了EasyNVR視頻能力輸出的身影，EasyNVR多年服務於各行各業視頻基礎建設，EasyNVR的可靠性、完整性、穩定性已經受到了業界的普遍承認！

智慧校園

平安廠區

智慧家居

EasyNVR安防攝像機網頁流媒體服務

EasyNVR是一款擁有完整、自主、可控知識產權，同時又可以具有軟硬一體功能的安防互聯網化流媒體服務器，可以經過簡單的網絡攝像機通道配置，將傳統監控行業裏面的高清網絡攝像機IP Camera、NVR等具備RTSP、Onvif協議輸出的設備接入到EasyNVR，EasyNVR可以將這些視頻源的音視頻數據進行拉取，轉換爲RTMP/HLS，進行全平臺終端H5直播（Web、Android、iOS），而且EasyNVR可以將視頻源的直播數據對接到第三方CDN網絡，實現互聯網級別的直播分發。詳情可訪問EasyNVR官網：http://www.easynvr.com