zoukankan      html  css  js  c++  java
  • bootstrap-paginator 分页插件笔记

     

        bootstrap-paginator基于bootstrap框架,使用起来非常简单。官网:http://harttle.github.io/bootstrap-paginator/ 

        在bootstrap框架下只需要引入一个bootstrap-paginator.js

    <script src="~/Content/js/bootstrap-paginator.min.js"></script>

       html:

      <div id="logtable">
          @Html.Action("GetExamLogs")
       </div>
     <div id="example"></div>

     GetExamlogs一个显示图表的partview:

     View Code

     js:

    复制代码
    <script >
        $(function () {
            var options = {
                currentPage: 1,//当前页
                totalPages: $("#totalpage").val(),//总页数
                numberofPages: 5,//显示的页数
                
                itemTexts: function(type, page, current) { //修改显示文字
                    switch (type) {
                    case "first":
                        return "第一页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "最后一页";
                    case "page":
                        return page;
                    }
                }, onPageClicked: function (event, originalEvent, type, page) { //异步换页
                    $.post("/Exam/GetExamLogs",{page:page,take:2},function(data) {
                        $("#logtable").html(data);
                    });
                },
                        
        };
            $("#example").bootstrapPaginator(options);
        });
    </script>
    复制代码

    Action

    复制代码
     public ActionResult GetExamLogs(int page = 1, int take = 10)
            {
                //先简单的取出成绩吧
                var id = CheckValid();
                var res = _repository.GetExamResultsByUserId(id).ToList();
                ViewBag.TotalPage = Math.Ceiling(((float)res.Count() / take));
                var targets = res.Skip(take * (page - 1)).Take(take);
                return PartialView(targets);
            }
    复制代码

    最后效果:

     之前一直使用 一直使用的 jPaginate,感兴趣的同学可以移步。先对而言,还是paginator简单好用。

     mvc 开发
    摘要: 第一次看到ACE模板,有种感动,有种相见恨晚的感觉,于是迅速来研究。它本身是基于bootstrap和jqueryui,但更nice,整合之后为后台开发节省了大量时间。目前已经投入到了两个项目中。发现虽然不是完美,整体效果还是不错,特此分享给园友。这一节先讲其中的Jqgrid。按照国际惯例,先上两张图。阅读全文
    posted @ 2014-06-30 00:42 stoneniqiu 阅读(3066) | 评论 (112) 编辑
     
    摘要: BlogEngine.Net 是个功能点很全面的开源博客系统,容易安装和实现定制,开放接口支持TrackBack,可以定义主题配置数据源等等。可谓五脏俱全,这里先记录一下它基于Membership的权限管理,文章有点长了,花了不少时间。这只是对知识的一个梳理,并不是要推荐用这种方式做权限管理,分享一下BlogEngine实现的方式。所以园友们各取所需。阅读全文
    posted @ 2014-05-19 08:21 stoneniqiu 阅读(1154) | 评论 (3) 编辑
     
    摘要: 很多时候需要这样的功能,对表格进行分页、排序和检索。这个有很多实现的方式,有现成的表格控件、用前端的mvvm,用户控件。但很多时候看着很漂亮的东西你想进一步控制的时候却不那么如意。这里自己实现一次,功能不是高大全,但求一个清楚明白,也欢迎园友拍砖。前端是bootstrap3+jPaginate,后台基于membership。没什么难点阅读全文
    posted @ 2014-05-08 08:05 stoneniqiu 阅读(3117) | 评论 (28) 编辑
     
    摘要: 之前就早耳闻前端MVC的一些框架,微软自家的Knockout.js,google家的AngularJs,还有Backone。但未曾了解,也不解为什么前端也要这么分。这两天看了AngularJs的官方教程倒是吃了一惊(专业前端的就不要见怪我的out了),这小小的js,五脏俱全,不但有model,controller,view,这三个重要元素,还有Templates,Filter,Routing,依赖注入的DI都有,还有一套 Jasmine 框架下的单元测试!阅读全文
    posted @ 2014-04-20 00:58 stoneniqiu 阅读(1021) | 评论 (0) 编辑
     
    摘要: MVC中的Filte 简单又优雅的实现了AOP ,在日志,权限,缓存和异常处理等方面用的比较多。但本文不是讨论Filter这些功能点,而是总结Filter实现的方式。说实现也不太准确,也就是它的呈现方式。自带有四种Filter(借用了Liam wang的图)阅读全文
    posted @ 2014-04-10 08:22 stoneniqiu 阅读(866) | 评论 (2) 编辑
     
    摘要: 之前上传图片的做法都是上传到服务器上的文件夹中,再将url保存到数据库。其实在MVC中将图片上传到数据库很便捷的事情,而且不用去存url了。而且这种方式支持ie6(ie6不支持jquery自动提交form,认为其不安全,这里form是主动点击提交的,所以就没有这个问题,而uploadify自动提交是flash的方式)。一、建立模型 场景是假设我们需要给一个Product编辑一张图片。在模型中,先定义好两个属性,ImageData和ImageType public class Product { [HiddenInput(DisplayValue=false)] ...阅读全文
    posted @ 2014-03-17 08:30 stoneniqiu 阅读(1318) | 评论 (5) 编辑
     
    摘要: 刚开始用xml存储东西的时候都是不断的在xml文件里面添加或者修改xml的节点,这个是很常见的做法,这方面的博客也很多我也就不介绍了。但其实在小批量存储的时候我们可以直接将对象存进xml/xaml,使用的时候将整个对象加载出来,操作完成后再保存下去,这种做法没有什么技术难点,但我只是觉得更加的面相对象,模型和存储可以分开,模型的接口可以暴露出来,让前端的或者后台的调用,而存储可以换成xml/xaml和数据库。这样的好处就不言而喻了。阅读全文
    posted @ 2014-02-10 14:10 stoneniqiu 阅读(724) | 评论 (2) 编辑
     
    摘要: 看过几款分页插件,觉得Jpaginate比较简约,样式也比较容易的定制,而且体验也比较好,支持鼠标滑动效果。先上效果图:阅读全文
    posted @ 2013-12-09 09:19 stoneniqiu 阅读(1632) | 评论 (5) 编辑
     
    摘要: 在园友的强烈呼唤下,我还是负责任的分享给大家,因为对代码比较熟悉一下,还是有些问题要说明,不然别人看起来会比较费劲。说实话除了这个bootstrap的界面风格和这件事情本身对大家有吸引力之外,内部的逻辑,结构,可能有些捉襟见肘,会让大家见笑,大牛们完全可以略过.现在源码已经让我推到GitHub上面去了。我先从头到尾的介绍一下,然后说一些存在的问题。也希望大家给出更好的建议。阅读全文
    posted @ 2013-12-04 10:26 stoneniqiu 阅读(6194) | 评论 (126) 编辑
     
    摘要: 起因: 那是七月份了,看见单身的同事在上花田网,当时觉得风格比较清新,还没有世纪佳缘等那些网站那么商业化,加上又看到了bootrstrap,于是就想做个demo出来玩玩。中间自己又在做其他的事情,和web没有关系,也想没事的时候也可以练练web,到上个星期,干脆就发布在公司的内网了。没想到同事们mail一传,现在都有200多个人(我的公司是个制造业,这边全部的职工有2w+的人,除了产线上的小妹妹们,有电脑的也有好几千)注册了。阅读全文
    posted @ 2013-12-02 16:28 stoneniqiu 阅读(5772) | 评论 (93) 编辑
     
    摘要: 图片上传的插件很多,但很多时候还是不能切合我们的需求,我这里给大家分享个我用一个form,file实现上传四张图片的小demo。完全是用jquery前后交互,没有用插件。 基本思路:用户点击相关div触发file元素打开浏览框----》用setInterval不断检测file文件是否选中文件---》选中之后触发form自动提交到后台---》后台将文件存储到临时文件夹返回图片在临时文件夹的地址---》窗口提示上传功能并预览图片---》用户点击发布---》后台保存图片(移动到指定文件夹,并存入数据库)阅读全文
    posted @ 2013-11-19 19:32 stoneniqiu 阅读(2123) | 评论 (25) 编辑
     
    摘要: ASP.NET MVC QQ面试阅读全文
    posted @ 2013-09-26 22:28 stoneniqiu 阅读(4718) | 评论 (36) 编辑
     
    摘要: 用了Codefirst后最大的困扰就是数据变化引起数据库的删除再新建,这样会造成数据丢失,musicstore中介绍的播种办法也只能满足下测试的需要。在EntityFrameWork5.0中引入了数据迁移功能能很好的解决这个问题。 步骤一:需要EF5.0,最好用NuGet来安装。工具-->库程序包管理器-->程序包管理控制台(我用的VS2012) 输入命令,安装最新的ef。如下 输入get-help NuGet 可以查看其它的命令主题 about_NuGet 简短描述提供有关 NuGet 程序包管理器命令的信息。 详细描述本主题介绍 NuGet 程序包...阅读全文
    posted @ 2013-06-04 17:29 stoneniqiu 阅读(1119) | 评论 (6) 编辑
     
    摘要: form.js 这个插件已经是很有名的,结合MVC的html辅助方法异步上传就很简单了。jQuery Form Plugin :http://www.malsup.com/jquery/form/#file-upload1.引入js,构建form。本身的BeginForm已经能够提交,但是如果有返回值的话,页面会跳转,这样体验就很不好。网上有说把反馈结果写在ViewData中,来绕开return。其实这是浏览器的默认行为,用form.js可以阻止掉。@using (Html.BeginForm("Upload", "Home", FormMethod.P阅读全文
    posted @ 2013-05-02 10:20 stoneniqiu 阅读(1442) | 评论 (3) 编辑
     
    摘要: 说明:现在jquery上传图片的插件很多了,但还是想弄清楚下MVC 图片是怎么传上去的。结果反馈,效果还需要改善。1.在View中还是用beginform 再加上 一个file,一个submit,用post的方式将file传递过,表单标签中设置enctype="multipart/form-data"来确保匿名上载文件的正确编码。默认情况下的form是不能用来上传的。@using (Html.BeginForm("Upload","Home",FormMethod.Post,new {enctype="m...阅读全文
    posted @ 2013-04-25 16:13 stoneniqiu 阅读(176) | 评论 (0) 编辑
     
    摘要: 1.使用数据库单例模式容易造成数据库连接冲突,因此最好的方案应该是访问一次数据库后应该马上断开连接。即使用Using。2.需要仓库,即实现接口的方法。 public interfaceIUserDbRepository:IBaseDbRepository ....... public classUserDbRepository: IUserDbRepository.........3.运用反射获取到对象类型再来各自处理4.建立空的对象,避免重复代码5.用字典来传递需要修改的属性 这样就比较灵活。 如果全部修改对象 容易造成错误6.深浅复制。copier public void Update(.阅读全文
    posted @ 2013-04-08 19:22 stoneniqiu 阅读(1098) | 评论 (2) 编辑
    分类: Jquery
  • 相关阅读:
    在App_Data中创建数据库获取连接串简便方法!
    ObjectDataSource配合存储过程(采用数据集)的使用(删除可以解决,但是编辑出错好像它的方法也无法解决
    金鹰dreamweaver视频教程下载地址
    ASP.NET里创建Microsoft Word文档
    net3:Calendar控件的使用
    vs2005做的留言本——天轰川下载
    Wiley出版 SQL Server 2005宝典
    ADO:防止更新的数据含有单引号而出错
    用 Bitcron 搭博客:你只管写作,它负责呈现
    如何去掉Myeclipse对JS等文件的验证
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/4000207.html
Copyright © 2011-2022 走看看