Bootstrap-table服务端分页

bootstarp-table服务端分页

$(‘#test-table‘).bootstrapTable({
                 //请求方法
                method: ‘get‘,
                 //是否显示行间隔色
                striped: true,
                //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                cache: false,
                //是否显示分页(*)
                pagination: true,
                 //是否启用排序
                sortable: false,
                 //排序方式
                sortOrder: "asc",
                //初始化加载第一页,默认第一页
                //我设置了这一项,但是貌似没起作用,而且我这默认是0,- -
                //pageNumber:1,
                //每页的记录行数(*)
                pageSize: 10,
                //可供选择的每页的行数(*)
                pageList: [10, 25, 50, 100],
                //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
                url: "/test/testtable.action",
                //默认值为 ‘limit‘,传给服务端的参数为:limit, offset, search, sort, order Else
                //queryParamsType:‘‘,
                ////查询参数,每次调用是会带上这个参数,可自定义
                queryParams: queryParams : function(params) {
                    var subcompany = $(‘#subcompany option:selected‘).val();
                    var name = $(‘#name‘).val();
                    return {
                          pageNumber: params.offset+1,
                          pageSize: params.limit,
                          companyId:subcompany,
                          name:name
                        };
                },
                //分页方式:client客户端分页,server服务端分页(*)
                sidePagination: "server",
                //是否显示搜索
                search: false,
                //Enable the strict search.
                strictSearch: true,
                //Indicate which field is an identity field.
                idField : "id",
                columns: [{
                    field: ‘id‘,
                    title: ‘id‘,
                    align: ‘center‘
                }, {
                    field: ‘testkey‘,
                    title: ‘测试标识‘,
                    align: ‘center‘
                }, {
                    field: ‘testname‘,
                    title: ‘测试名字‘,
                    align: ‘center‘
                },{
                    field: ‘id‘,
                    title: ‘操作‘,
                    align: ‘center‘,
                    formatter:function(value,row,index){
                        //通过formatter可以自定义列显示的内容
                        //value:当前field的值,即id
                        //row:当前行的数据
                        var a = ‘<a href="" >测试</a>‘;
                    }
                }],
                pagination:true
            });

datepicke绑定时间

 $(".begTime").datepicker({
            format: ‘yyyy/mm/dd‘,
            toggleActive: false,
            orientation: ‘top right‘,
            language: ‘zh-CN‘,
            endDate: new Date().format("yyyy/MM/dd"),
            autoclose: true
        })
        $(".endTime").datepicker({
            format: ‘yyyy/mm/dd‘,
            toggleActive: false,
            orientation: ‘top right‘,
            language: ‘zh-CN‘,
            endDate: new Date().format("yyyy/MM/dd"),
            autoclose: true
        })

默认绑定控件val值

  $(".endTime").val(new Date().format("yyyy/MM/dd"));
  $(".begTime").val(moment().subtract(7, "days").format("YYYY/MM/DD"));

  //moment转换时间格式
  var moments = moment(row["CreationTime"]).format("YYYY/MM/DD");
时间: 2024-10-10 19:06:35

Bootstrap-table服务端分页的相关文章

bootstrap table 服务端分页

前端js $(function () { //$('#MDTable').bootstrapTable('destroy'); $("#MDTable").bootstrapTable({ //'destroy' 是必须要加的==作用是加载服务器数据,初始化表格的内容Destroy the bootstrap table. toolbar: '#toolbar', //工具按钮用哪个容器 method: 'get', url: "/MD_All/MD_Data",

关于bootstrap table的server分页

首先是bootstrap初始化的表格参数: // 初始化Table oTableInit.Init = function() { $('#booksTable').bootstrapTable({ url : '/TestWeb/booksTable', // 请求后台的URL(*) method : 'get', // 请求方式(*) toolbar : '#toolbar', // 工具按钮用哪个容器 striped : true, // 是否显示行间隔色 cache : false, //

BootStrap-table 客户端分页和服务端分页的区别

当服务器没有对数据进行分页时,前端页面设计又要求进行分页,要分开来设置. 服务端分页: responseHandler: function(data){ return data.response; }, 客户端分页,需要指定到rows: sidePagination : "client", responseHandler: function(data){ return data.response.rows; },

ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项

引言: 本人想自己个博客网站出来,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之后,发现即使你用了bootstrap还是要自己写css样式,都是自学的,前端真的很垃圾,在网上找了很多UI,以下是各种UI的地址,需要的可以去看看: H-ui:http://www.h-ui.net/H-ui.admin.shtml ,是一个前端大牛弄得,模仿bootstrap,做适合中国网上的UI

项目实战之服务端分页的实现——SQL

服务端的分页就一个SQL语句就可以搞定,贴出代码后自己慢慢欣赏: CREATE Procedure AppGetEmpList @EID int, @LGID int, @pagesize int, @pageindex int As Begin select count(*) count from appemployee Select a.ID,a.EID,Case When @LGID=2052 Then Name Else eName End Name,DepTitle,JobTitle

bootstrap table两种分页需要的数据不同

先上原帖地址:http://blog.csdn.net/tyrant_800/article/details/50269723 问题描述: 调用$("#show_list_table").bootstrapTable("refresh");刷新table以后,搜索条件可以传入,也请求到了数据,但是就是不在table中展示数据. 最后发现是因为服务器端分页和客户端分页需要的json格式不一样. 原帖内容: 服务器分页/客户端分页的转换,table刷新 bootstra

Datables 服务端分页for DJango

安装 django-datatables-view pip install django-datatables-view 前端配置-JS部分 $('#mytable').DataTable({ "paging": true, "lengthChange": true, "searching": true, "ordering": true, "info": true, "autoWidth&quo

bootstraptable 服务端分页问题

折腾了将近一周 终于分页好了 无语 先写下来 怕后面又忘了 前台写js时有几个点要注意: 1.contentType要设为application/x-www-form-urlencoded 2.queryParamsType设为''(为了方便,前台直接传pagesize就好) 1 $('#tablelist').bootstrapTable({ 2 url: url 3 method:'post', 4 toolbar: '#toolbar', //工具按钮用哪个容器 5 pagination:

bootstrap table 分页后,重新搜索的问题

前提: 自定义搜索且有分页功能,比如搜索产品名的功能. 现象:当搜索充气娃娃的时候返回100条记录,翻到第五页.  这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的结果.  也就是重新搜索后,pagenumber没有变. 按网上大部分说的:重新设置option就行了 $('#tableList').bootstrapTable({pageNumber:1,pageSize:10}); 以上是解决不了这个问题. 正确做法是 $("#table").bo