ThinkPHP中按条件查询后列表显示

浏览数：80 / 时间：2015年06月09日

最近在项目中遇到了需要根据下拉框的条件筛选出符合条件的数据，然后进行列表显示的问题。

技术分享

在ThinkPHP中进行列表显示的传统过程：通过在后台控制器中查询出数据，然后通过$this->assign()来实现控制器数据向页面的传递，在页面中通过<foreach>或<volist>标签来进行数据的解析，（注：在通过标签进行数据的解析时需要以“$”符号的形式）。

在进行条件查询时，需要通过jquery中ajax的方式将条件GET到后台控制器，后台控制器中接收数据，然后根据条件进行查询，将查询结果返回。

在项目实际操作时遇到了这样的两个问题，（1）当在将数据传递到后台控制器，后台控制器通过查询条件获取查询结果后，只能通过$this->ajaxReturn(查询结果)的方式将数据返回到前台页面的回调函数（在网上看到一个大神说还有一个display的方法显示，一直苦寻未果，若有大神知道，一定记得给说一声，感激不尽！）。而在前台进行解析时是以json的数据格式进行解析，所以无法通过ThinkPHP的模板解析获得数据进行显示（即无法通过"$"符号的方式进行解析显示，"$"符号是javascript中的关键字）。（2）在开始时分页是使用的ThinkPHP中已经封装的分页方法，其在进行分页时是实例化的一个分页对象，然后将分页对象中的分页列表传递到页面进行解析，从而实现页面数据分页。但是在通过ajax请求获取的数据只能返回到回调函数，也无法通过ThinkPHP的解析获取分页列表，从来导致分页无法使用。所以，总的来说，无法通过ThinkPHP解析json数据进行显示。

在网上苦苦寻觅，没有找到什么好办法，所以只好自己硬着头皮写了。因为ThinkPHP无法解析，所以只好通过javascript的方式，将数据解析显示。

 1 for(var i=0;i<ss.length;i++)
 2                     {
 3                         var infoList=$("<div id=‘divUserTable‘ class=‘divMenuItemTableClass‘>"+"<input type=‘hidden‘ name=‘hiddenInfoId‘ class=‘hiddenClass‘ id=‘hiddenInfoId_"+i+"‘"+"value="+"‘"+ss[i]["userid"]+"‘"+"/>"
 4                                 +"<div id=‘divUserTableSelect‘ class=‘fontNoneWeight‘><input type=‘checkbox‘ class=‘inputCheckbox‘ id=‘checkboxUserSelect_"+i+"‘"+"/></div>"
 5                                 +"<div id=‘divUserTableTitle‘ class=‘fontNoneWeight‘>"+ss[i]["user_name"]+"</div>"
 6                                 +"<div id=‘divUserTableNum‘ class=‘fontNoneWeight‘>"+ss[i]["studentorteacherid"]+"</div>"
 7                                 +"<div id=‘divUserTablePwd‘ class=‘fontNoneWeight‘>"+ss[i]["password"]+"</div>"
 8                                 +"<div id=‘divUserTableWorkShop‘ class=‘fontNoneWeight‘>"+ss[i]["workshop_name"]+"</div>"
 9                                 +"<div id=‘divUserTableOpreation‘><div id=‘divUserTableOpreationUpdate‘><a id=‘aWorkShopTableOperationUpdate‘ target=‘right‘ href=‘__APP__/Admin/WorkShop/ShowUpdateWorkShopUser/user_id/"+ss[i]["userid"]+"‘"+">修改</a></div></div>"
10                                 +"</div>");                        
11                         $("#divUserInfoList").append(infoList);
12                     }

通过将获取的数据进行解析，然后进行字符串的拼接，最后将拼接的字符串显示到列表中，从而实现以无刷新的方式进行按条件查询后显示到页面，至此终于将第一个问题解决了！（说句实话，字符串拼接真的很恶心人！众位仁兄，若有好方法，请务必告知！）。

唉，由于分页无法解析，内心苦苦挣扎，经过激烈的思想斗争，终于狠下心来重新写一个分页吧。所以学习了一下EasyUI的pagination分页，确实功能强大，非常实用。

先插入一点题外话，说一下EasyUI的pagination分页的使用。在使用pagination分页时首先需要引入EasyUI的文件包，引入后需在页面引入jquery.easyui.min.js、themes/default/easyui.css、themes/icon.css这三个文件。这样页面才可以使用分页。分页的使用有两种加载方式，（1）class加载方式（2）js加载方式

class加载：

<div id="box" class="easyui-pagination"
data-options="total:2000,pageSize:10"
style="background:#efefef;border:1px solid #ccc;">
</div>

通过在div中添加class="easyui-pagination"就可以将分页加载进来，data-options="total:2000,pageSize:10,"是对分页列表中数据或操作的设置。

js加载：

$(function () {

    $(‘#box‘).pagination({
        total : 5,
        pageSize : 1,
        pageNumber : 1,
        pageList : [1,2],
        //loading : true,
        buttons : [{
            iconCls : ‘icon-add‘,
        },‘-‘,{
            iconCls : ‘icon-edit‘,
        }],
        //layout : [‘first‘,‘prev‘,‘links‘,‘next‘,‘last‘],
        //showPageList : false,
        //showRefresh : false,
        //beforePageText : ‘弟弟‘,
        //afterPageText : ‘有{pages}个‘,
        displayMsg : ‘从{from}到{to}，有{total}人‘,
        onSelectPage : function (pageNumber, pageSize) {
            $(‘#box‘).pagination(‘loading‘);
            $(‘#content‘).panel(‘refresh‘, ‘user.php?page=‘+pageNumber+‘&pagesize=‘+pageSize);
            setTimeout(function () {
                $(‘#box‘).pagination(‘loaded‘);
            }, 1000);
            
            
        },
        onBeforeRefresh : function (pageNumber, pageSize) {
            alert(‘刷新之前‘);
        },
        onRefresh : function (pageNumber, pageSize) {
            alert(‘刷新之后‘);
        },
        onChangePageSize : function (pageSize) {
            alert(‘每页显示的条数被改变！‘);
        } 
    });
    
    $(document).click(function () {
        /*
        $(‘#box‘).pagination(‘refresh‘, {
            pageSize : 2,
            pageNumber : 2,
        });
        */
        $(‘#box‘).pagination(‘select‘, 2);
    });

});

通过在js文件中$("#id").pagination({});的方式将对应id的div设置成分页列表。说到这里，就无可避免的需要说一下pagination的属性列表：

技术分享

其中，主要用的有total：数据的总条数，pageNumber：当前显示的页码数，pageSize：每页显示的数量，pageList：可让用户自己手动改变的每页显示的数量。有了这些足以做数据的分页了。

回归正题：现在需要将所需条件进行提交，然后获取数据，同时进行分页。话不多说，上代码。

 1 $.ajax({
 2                     type:"GET",
 3                     url:"__URL__/GetCountByClassify",
 4                     data:{con:condition},
 5                     dataType:"json",
 6                     success:function(ss){   
 7                         var sum=ss[0]["count(*)"];
 8                         $("#divUserListPaging").pagination({
 9                             total:sum,
10                             pageSize:10,
11                             showPageList:false,
12                             beforePageText:"第",
13                             afterPageText:"共{pages}页",
14                             pageNumber:pageNum,
15                             onSelectPage: function ( pageNumber, pageSize) {
16                                 $(this).pagination(‘loading‘);
17                                 newData(pageNumber,pageSize);
18                                 $(this).pagination(‘loaded‘); 
19                                 makePage(pageNumber);
20                             }
21                         });                                               
22                     }
23                 });