上一篇介绍通过接口来获取数据,本篇将介绍如何以分页形式展示出接口获取到的数据

获取到的数据往往会很多,为了追去页面的美观和方便用户的检索,需要进行分页的展示;

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能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行拉取,转换为RTMP/HLS,进行全平台终端H5直播(Web、Android、iOS),并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络,实现互联网级别的直播分发;

详细说明:http://www.easydarwin.org/easynvr/

获取更多信息

邮件:support@easydarwin.org

WEB:www.EasyDarwin.org

Copyright © EasyDarwin.org 2012-2017

EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:使用BootstrapPagination以分页形式展示数据信息的更多相关文章

  1. EasyNVR摄像机网页无插件直播方案H5前端构建之:使用BootstrapPagination以分页形式展示数据信息

    背景介绍 EasyNVR核心在于摄像机的音视频流的获取.转换.转码与高性能分发,同时同步完成对实时直播流的录像存储,在客户端(PC浏览器.Android.iOS.微信)进行录像文件的检索.回放和下载. ...

  2. EasyNVR摄像机无插件直播流媒体服务器前端构建之输入框样式的调整

    EasyNVR授权方式分为软件的授权和硬件授权两种方式,软件授权需要在软件输入永久邀请码可以激化永久授权 起初我们的界面设计是为了满足功能的需求就是 ,用户可以输入激活码提交,完成永久授权. 在实际的 ...

  3. EasyNVR RTSP转HLS(m3u8+ts)流媒体服务器前端构建之:bootstrap-datepicker日历插件的实时动态展现

    EasyNVR中有对录像进行检索回放的功能,且先抛开录像的回放,为了更好的用户体验过.让用户方便快捷的找到对应通道对应日期的录像视频,是必须的功能. 基于上述的需求,为前端添加一个日历插件,在日历上展 ...

  4. EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之_关于接口调用常见的一些问题(401 Unauthorized)

    在之前的博客<EasyNVR H5流媒体服务器方案架构设计之视频能力平台>中我们描述了EasyNVR的定位,作为一个能力平台来进行功能的输出: 也就是说,在通常情况下,我们将一套视频的应用 ...

  5. EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:通过接口获取实时信息

    对于动态网站,要实时更新网站的信息,通过接口来获取实时信息是一个必不可少的部分.EasyNVR可以接入IPC等前端设备,必须要实时获取到对应的IPC实时信息进行展示. 本篇主要说明Ajax来获取数据. ...

  6. EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:bootstrap弹窗功能的实现

    在web前端的网页设计中,为了展示出简洁的网页风格和美观的效果,往往就会使用弹窗效果 在EasyNVR前端页面录像检索功能时,必然会播放录像,如果单独为播放录像文件排一个界面,用户在使用上会更加繁琐, ...

  7. EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:内部搜索功能的实现

    上一篇介绍了处理接口获取的数据,本篇将介绍如何在接收到的数据中搜索出自己符合条件的数据: 为了页面的美观,我们往往会以分页的形式来进行数据的展示.但是,当需要展示出来的数据太多的时候,我们很难迅速的找 ...

  8. EasyNVR RTSP摄像机转HLS直播服务器中使用Onvif协议控制预置位

    EasyNVR支持预置位控制,包括转到指定预置位,设置指定预置位,删除指定预置位 预置位在安防领域有较为普遍的应用,可以进行很多既定位置的跳转,很方便 之前我们说过如何用Onvif协议进行设备的发现, ...

  9. windows平台最简单的rtmp/hls流媒体服务器

    feature: rtmp/hls live server for windows, double click to run,don't need config. run and quit: doub ...

随机推荐

  1. luogu P2949 [USACO09OPEN]工作调度Work Scheduling

    题目描述 Farmer John has so very many jobs to do! In order to run the farm efficiently, he must make mon ...

  2. 2016集训测试赛(十八)Problem C: 集串雷 既分数规划学习笔记

    Solution 分数规划经典题. 话说我怎么老是忘记分数规划怎么做呀... 所以这里就大概写一下分数规划咯: 分数规划解决的是这样一类问题: 有\(a_1, a_2 ... a_n\)和\(b_1, ...

  3. mfoc安装编译

    系统环境 UBUNTU16.04,要安装好各种基础的编译环境,这就不说了,如果不知道需要什么,那就编译时出错时看到什么安装什么吧 下载源码包libnfc, mfoc, mfcuk,都是github上, ...

  4. 解决Ubuntu下gedit中文乱码的情况

    windows下简体中文多用GBK编码 (或GB2312, GB18030), 而linux下多用UTF-8编码. 因此,一般来说在微软平台编辑的中文txt不能在ubuntu下直接打开查看,除非在保存 ...

  5. MFC中 SDI/MDI框架各部分指针获取方式

    VC MFC SDI/MDI框架各部分指针获取方式   整理总结一下,希望能帮助到别人.   获得CWinApp 获得CMainFrame 获得CChildFrame 获得CDocument 获得CV ...

  6. UNIX网络编程卷1 server程序设计范式8 预先创建线程,由主线程调用accept

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie 1.程序启动阶段创建一个线程池之后仅仅让主线程调用 accept 并把客户连接传递给池中某个 ...

  7. SilverLight-DataBinding-DataTemplates: 三、数据绑定 DataTemplates模板的使用(求助,没有到达实例效果,求高人指点迷津)

    ylbtech-SilverLight-DataBinding-DataTemplates: 三.数据绑定 DataTemplates模板的使用 1.A, Data Templates Intro(数 ...

  8. JAVA_Could not find property [struts.actionMapping]怎么办

    你的项目中不包含log4j.jar这个文件,包含进去即可

  9. UNP学习笔记(第十一章 名字与地址转换)

    域名系统 域名系统(Domain Name System,DNS)主要用于主机名字与IP地址之间的映射. 主机名既可以是一个简单得名字,如solaris,也可以是一个全限定域名,如solaris.un ...

  10. 跨域用ajax处理并返回处理状态

    <script type="text/javascript">        $(function () {            $("#submitBtu ...