コンストラクトのEasyNVR RTSPターンRTMP-HLS-FLVストリーミングサーバフロントエンド：タブの形式で情報を使用してBootstrapPagination印象データ

背景

EasyNVRコアは、リアルタイムのライブストリームのために同時に完全なビデオストレージは、クライアント上のビデオファイルを検索しながら、オーディオとビデオのストリーミングカメラ、変換、トランスコーディングおよび高性能な分布を得ることである（PCブラウザ、アンドロイド、iOSの、マイクロレター）、再生、ダウンロード。

基礎条件下で、装置の前端ことを確実にするとEasyNVR通信ネットワークとの間で、オーディオとビデオのキャプチャはEasyNVRデジタルネットワークカメラのビデオストリームを取得することにより完了し、EasyNVRストリーミングプロトコル、トランスコーディングおよびストリーミングメディア配信内部に実装され、最終的には、分割することができますあなたはより多くのことができるようにEasyNVR自体は、さまざまなプラットフォーム用のHTTPインターフェースの二次開発のための開発言語を提供する一方RTMP、HTTP-FLVとHLSストリーミングを発行し、EasyNVR自体も、リアルタイムのビデオストリームを格納および管理することができます簡単に、より広範な管理機能を実現するために、お客様の業務システムと組み合わせます。
EasyNVR

分析

ここインターフェイスを介してデータを取得する前のはじめに、これは、データを取得するために、ページング界面を形成する方法について説明します

インタフェースデータによって得られた美しさのページを追求し、多くなる傾向があり、ユーザーの検索は、ショーをページングする必要があります。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);//分页索引值
}

ポート：オブジェクトのデータ処理は、使用後を通じて必要があります。
layoutScheme：「FIRSTPAGE、PAGENUMBER、LASTPAGE」、ページネーションスタイルのショーケース・プロジェクト//必要;
合計：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シーン

知恵キャンパス

EasyNVRシーンII

pingの工場

シーン三asyNVR

ワイザーホーム

EasyNVRセキュリティカメラウェブストリーミングサービス

EasyNVRてきたが、従来の高精細ネットワークカメラIPカメラ内部で業界を監視し、簡単なチャネル構成を通じてフル、独立して、制御可能な知的財産権ですが、また、インターネットのストリーミングメディアサーバーのセキュリティソフトウェアとハードウェアの統合の機能を持つことができ、ネットワークカメラなどNVR RTSP、EasyNVRにONVIFプロトコルの出力デバイスへのアクセスと、EasyNVRこれらのオーディオおよびビデオデータは、ビデオソースすることができことは、RTMP / HLSに変換され、完全なインターネット端末H5は、（ウェブ、Android、iOS版）のプル生きていますおよびサードパーティのCDNネットワークへのデータのライブビデオソースを放送することができEasyNVR、インターネット規模の分散します。EasyNVRあなたは、公式ウェブサイトを訪問するかもしれ詳細：http://www.easynvr.com
EasyNVR知的財産権