文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用bootstrap-table插件进行表格分页

问如何使用bootstrap-table插件进行表格分页
EN

Stack Overflow用户

提问于 2018-04-26 14:37:41

回答 2查看 2.8K关注 0票数 1

在我的项目中，我使用bootstap-table插件进行表分页。

bootstrap-table的url为：

http://bootstrap-table.wenzhixin.net.cn/getting-started/

我已经下载了代码，并在我的页面中使用。

但不幸的是，它失败了。下面是我的代码：

<script>
$("#xzy").bootstrapTable({ 
  striped: true,  
  pagination: true,
  pageList: [10, 20],
  pageSize: 10, 
  pageNumber: 1, 
  sidePagination:'client',
  sortName: 'id',
  sortOrder: 'desc', 
  columns: [{
    field: 'id',
    title: 'Item ID'
     }, {
    field: 'name',
    title: 'Item Name'
    }, {
    field: 'price',
    title: 'Item Price'
    }],
  data: [{
    id: 1,
    name: 'Item 1',
    price: '$1'
}, {
    id: 2,
    name: 'Item 2',
    price: '$2'
}]
});
</script>
</head>  

<body style="height:100%" >  
<table data-toggle="table" id="xzy"></table>
</body>

下面是包含的文件：

<link href="jsui/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="jsui/bootstrap-3.3.7-dist/css/dashboard.css" rel="stylesheet">
<link href="bootstrap-table-1.12.1/dist/bootstrap-table.min.css" rel="stylesheet">

<script type="text/javascript" src="jsui/easyui-1.5.3/jquery.min.js"></script>
<script type="text/javascript" src="jsui/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script src="bootstrap-table-1.12.1/dist/bootstrap-table.min.js"></script>
<script src="bootstrap-table-1.12.1/dist/bootstrap-table-zh-CN.js"></script>

但它的工作失败了。

今天，我尝试了另一种方式，那就是sever way。下面是我的代码：

var allS="Init";
$("#xzy").bootstrapTable({ 
  url: "idcCCA_at.php", 
  dataType: "json",
  striped: true, 
  pagination: true, 
  pageList: [10, 20], 
  pageSize: 10,
  pageNumber: 1,
  sidePagination: 'server', 
  queryParams:{allS:allS},
  columns: [
      {
          checkbox: true, 
          align: 'center' 
      }, {
          field: 'one', 
          title: 'one'
      }, {
          field: 'two',
          title: 'two'
      }, {
          field: 'three',
          title: 'three'
      }, {
          field: 'four',
          title: 'four'
      }, {
          field: 'five',
          title: 'five'
      },{
          field: 'six',
          title: 'six'
      }
  ]
});

idcCCA_at.php代码是：

if(isset($_POST['allS']))
{
include("DB.php"); //login DB code

 $sql="select one,two,three,four,five,six from sheet_A where one='John';";
 $stmt=$conn->query($sql);
 $row=$stmt->fetch(PDO::FETCH_ASSOC);
 $tmpArr = array(
    'one'=>$row['one'],
    'two'=>$row['two'],
    'three'=>$row['three'],
    'four'=>$row['foue'],
    'five'=>$row['five'],
    'six'=>$row['six'],
    );
 echo json_encode($tmpArr);
 }

不幸的是，它的工作失败again.It似乎没有什么问题，谁可以帮助我？

twitter-bootstrap

bootstrap-table

回答 2

Stack Overflow用户

发布于 2018-04-29 13:24:31

我的html代码(这是带有服务器分页的工作副本的副本和粘贴)。

$('#master').bootstrapTable({
    url: './lookup/gettubing.php?d='+$.now(),
    pagination: true,
    sidePagination: 'server',
    pageSize: '25',
    pageList: '[25, 50, 100, All]',
    showRefresh: true,
    columns:[
        ...
    ]
});

和我的php服务器文件

include("../../Includes/aedclass.php"); 
$nconn = new WorkData();
$conn = new PDO ($nconn->DB_DSN,$nconn->DB_USER,$nconn->DB_PASSWORD);

$offset = $_GET['offset'];
$limit = $_GET['limit'];

//calculate start & end
    if ($offset>0){
        $start = $offset+1;}
    else{
        $start = $offset;}      
    $end = $offset + $limit;


$data = array();

//get total record count and pass to json
$sql = "SELECT count(*)
    FROM master_well_list, tubing_size 
    WHERE master_well_list.api = tubing_size.api";

$stmt = $conn->prepare($sql);
$stmt->execute();

$result = $stmt->fetch(PDO::FETCH_BOTH);

$rowcnt = $result[0];

$data = array();
$data['total']=$rowcnt;

$sql = "SELECT * FROM (SELECT ROW_NUMBER() OVER(ORDER BY field, pad, well_name, well_num)
        AS RowNumber, well_name, well_num, field, pad
    FROM master_well_list, tubing_size
    WHERE master_well_list.api = tubing_size.api)   AS TEST
    WHERE RowNumber BETWEEN $start AND $end";

$stmt = $conn->prepare($sql);
$stmt->execute();

$result = $stmt->fetchAll(PDO::FETCH_ASSOC);

$data['sql']=$sql;
$data['rows']=$result;

echo json_encode($data);

对于客户端html代码

$('#master').bootstrapTable({
    url: './lookup/gettubing.php?d='+$.now(),
    pagination: true,
    sidePagination: 'client',
    pageSize: '25',
    pageList: '[25, 50, 100, All]',
    showRefresh: true,
    columns:[
        ...
    ]
});

服务器端

include("../../Includes/aedclass.php"); 
$nconn = new WorkData();
$conn = new PDO ($nconn->DB_DSN,$nconn->DB_USER,$nconn->DB_PASSWORD);


$sql = "SELECT well_name, well_num, field, pad
    FROM master_well_list, tubing_size
    WHERE master_well_list.api = tubing_size.api";

$stmt = $conn->prepare($sql);
$stmt->execute();

echo json_encode($result);

票数 0

Stack Overflow用户

发布于 2018-05-02 09:20:06

更改这些代码：

  $row=$stmt->fetch(PDO::FETCH_ASSOC);
  $tmpArr = array(
   'one'=>$row['one'],
   'two'=>$row['two'],
   'three'=>$row['three'],
   'four'=>$row['foue'],
   'five'=>$row['five'],
    'six'=>$row['six'],
   );
echo json_encode($tmpArr);

对于这些代码：

$row=$stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($row);

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50036334

复制

相似问题

问如何使用bootstrap-table插件进行表格分页
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用bootstrap-table插件进行表格分页EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用bootstrap-table插件进行表格分页
EN