Question

我正在尝试实现Bootstrap Table，但它没有返回任何数据。我没有看到代码有任何问题，但它没有工作，并且没有在控制台中显示任何错误。

请参阅以下代码，如果我遗漏了任何内容，请告诉我。

index.cfm

<!DOCTYPE html>
<html lang="en">
  <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Bootstrap Table Server side with php and mysql</title>
        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
  </head>


<div class="container"><br />
    <div class="row">
        <div class="page-header">
           <h1>Users</h1>
        </div>
        <div id="Error" class="text-danger"></div>
        <div class="col-sm-12 col-md-12 col-lg-12">
            <table id="users" data-height="400" data-side-pagination="server" data-pagination="true" data-search="true" data-toolbar="#Error">
            </table>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(e) {
        $('#users').bootstrapTable({
                method: 'get',
                url: 'users.cfc?method=getUsers',
                cache: false,
                height: 400,
                striped: true,
                pagination: true,
                pageSize: 10,
                pageList: [10, 25, 50, 100, 200],
                search: true,
                /*showColumns: true,*/
                showRefresh: true,
                minimumCountColumns: 2,
                clickToSelect: true,
                columns: [
                          //{field: 'Count',title: 'SNO',align: 'right',valign: 'bottom',sortable: false},
                          {field: 'userid',title: 'Client ID',visible:true},
                          {field: 'clientName',title: 'Client Name',align: 'center',valign: 'middle',sortable: true},
                          {field: 'userName',title: 'User Name',align: 'left',valign: 'top',sortable: true}]
            });
    });


</script>

users.cfc

<cfcomponent output="no">
    <cfsetting showdebugoutput="no" />
    <CFSET ODBCDATASOURCE= "dt2" />

    <cffunction name="getUsers" access="remote" returnformat="plain" returntype="any">
        <cfargument name="offset" default="0" type="numeric">
        <cfargument name="limit" default="10" type="numeric">
        <cfargument name="order" default="asc" type="string">
        <cfargument name="sort" default="userid" type="string">
        <cfargument name="search" default="" type="string" />

        <cfquery name="getUsers" datasource="#ODBCDATASOURCE#">
            select * from users
        </cfquery>

        <cfquery name="qCount" datasource="#ODBCDATASOURCE#">
            SELECT COUNT(*) as total
            FROM users
            WHERE deleted_int = 0
            <cfif Search NEQ "">
                and
                userid like '%#Search#%' OR userName like '%#Search#%' OR clientName like '%#Search#%'
            </cfif>
        </cfquery>

        <cfset resultStruct = Structnew() />
        <cfset resultStuct["total"] = qCount.total />
        <cfset resultStuct["rows"] = ArrayNew(1) />
        <cfset count = 1/>
        <cfloop query="getUsers" >
            <cfset resultStuct["rows"][count]['COUNT'] =  Count />
            <cfset resultStuct["rows"][count]['userid'] =  getUsers.userid />
            <cfset resultStuct["rows"][count]['clientName'] =  getUsers.clientName />
            <cfset resultStuct["rows"][count]['userName'] =  getUsers.userName />
            <cfset Count = Count + 1/>
        </cfloop>

        <cfreturn SerializeJSON(resultStuct) />
    </cffunction>

</cfcomponent>

更新1：

上面的代码工作正常并且可以获取所有数据，但是当我将下面的代码放在 getuser cfquery 中时，它就不会获取任何数据。

WITH Rows AS(
   SELECT userid
          , userName
          , clientName
          , ROW_NUMBER() OVER(ORDER BY# sort## order#)[Row] 
   FROM users WHERE deleted_int = 0 
   <cfif Search NEQ ""> 
     AND userid like '%#Search#%'
     OR  userName like '%#Search#%'
     OR  clientName like '%#Search#%' 
   </cfif>
)
SELECT * 
FROM   Rows
WHERE  Row >= #offset + 1# AND Row <= #offset + limit#

更新2

现在使用限制和偏移来获取正确的数据。搜索工作也很好。但是pageList下拉列表，排序仍无法正常工作。

更新3

从Bootstrap.js中删除了pageList。现在只有一个问题，排序。

Answer 1

用于排序引导表我通常使用这个https://datatables.net/ javascript插件来添加排序和搜索功能。如果你使用coldfusion构建整个表，你可以使用这个插件轻松实现它。希望这有帮助

Bootstrap表没有返回任何Data Coldfusion

1 个答案: