jQuery dataTable 表格插件的後臺分頁與界面展現

效果：

html部分：

{include file="Public:inner_header" /}

<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首頁 <span class="c-gray en">&gt;</span> 資訊管理 <span
        class="c-gray en">&gt;</span> 資訊列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
                                              href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
    <div class="text-c">

        <form  action="" id="serachform">
            <button onclick="removeIframe()" class="btn btn-primary radius">關閉選項卡</button>
            添加時間：<input type="text" onfocus="WdatePicker({ dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{ $dp.$D(\'datemax\')||\'%y-%M-%d\'}' })" id="addtime" name="addtime" class="input-text Wdate" style="width:160px;">
            文章狀態：
            <span class="select-box inline">
                <select name="status" class="select">
                    <option value="0">所有</option>
                    <option value="1">上架</option>
                    <option value="2">下架</option>
                </select>
            </span>
            <input type="text" name="title" id="title" placeholder=" 文章標題" style="width:250px" class="input-text">
            <input type="hidden" name="is_serch" value="1">
            <button name="" id="" onClick="submitserach()" class="btn btn-success" type="submit">
                <i class="Hui-iconfont">&#xe665;</i> 搜資訊
            </button>
        </form>
    </div>
    <div class="cl pd-5 bg-1 bk-gray mt-20"><span class="l"><a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量刪除</a> <a
            class="btn btn-primary radius" data-title="添加資訊" data-href="article-add.html" onclick="Hui_admin_tab(this)"
            href="javascript:;"><i class="Hui-iconfont">&#xe600;</i> 添加資訊</a></span> <span
            class="r">共有數據：<strong>54</strong> 條</span></div>
    <div class="mt-20">
       <table class="table table-border table-bordered table-hover table-bg table-sort">
        <thead>
            <tr class="text-c">
                <th><input type="checkbox" name="selectItem" value=""></th>
                <th>ID</th>
                <th>標題</th>
                <th>狀態</th>
                <th>操做</th>
            </tr>
        </thead>
         <tbody>
          
         </tbody>

  
    </table>
    </div>
</div>
<!--_footer 做爲公共模版分離出去-->
<script type="text/javascript" src="__STATIC__/add/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/add/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="__STATIC__/add/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript"
        src="__STATIC__/add/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 做爲公共模版分離出去-->

<!--請在下方寫此頁面業務相關的腳本-->
<script type="text/javascript" src="__STATIC__/add/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="__STATIC__/add/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="__STATIC__/add/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">

$(function(){
    $('.table-sort').dataTable({
        "aaSorting": [[ 1, "desc" ]],//默認第幾個排序

        "bStateSave": true,//狀態保存
        "aLengthMenu" : [5, 15, 25, 35,45,55],
        "searching": false,
        "bFilter" : false,// 搜索欄  
        "serverSide": true,
         "bInfo" : true, //是否顯示頁腳信息，DataTables插件左下角顯示記錄數
        "bAutoWidth": true, //自適應寬度  
        "sAjaxDataProp":"aData",//是服務器分頁的標誌，必須有
         "PaginationType" : "full_numbers",
       
        //獲取服務端返回數據，aDataSet根據分頁展現數據
        "ajax": {
           "url":"{:url('Achievementactivity/productcontent')}",
           /*"data":function(d){    //額外傳遞的參數
               d.title = $('#title').val();
               d.addtime = $('#addtime').val();
           },*/  
            dataSrc: function(result) { 
                 console.log(result);
                 return result.data;
           }

        },
      'columns':[ // 表格數據是obj是映射顯示
                    {data:function(data){
                        html1 = '<input type="checkbox" id="Check[]" name="Check[]" value="'+data.id+'">';
                        return html1;
                    }},
                    {data:'id'},
                    {data:'title'},
                    {data:'status'},
                    {data:function(data){
                        html = '<a style="text-decoration:none" onClick="article_shenhe(this,'+data.id+')" href="javascript:;" title="審覈">審覈</a> <a style="text-decoration:none" class="ml-5" onClick="article_edit(this,'+data.id+')" href="javascript:;" title="編輯"><i class="Hui-iconfont">&#xe6df;</i></a> <a style="text-decoration:none" class="ml-5" onClick="article_del(this,'+data.id+')" href="javascript:;" title="刪除"><i class="Hui-iconfont">&#xe6e2;</i></a>';
                        
                        return html;
                    }}
                ],
    "oLanguage":{
          "sProcessing" : "正在加載中......",
          "sLengthMenu" : "每頁顯示 _MENU_ 條記錄",
          "sZeroRecords" : "正在加載中!!......",
          "sEmptyTable" : "表中無數據存在！",
          "sInfo" : "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄",
          "sInfoEmpty" : "顯示0到0條記錄",
          "sInfoFiltered" : "數據表中共爲 _MAX_ 條記錄",
          "sSearch" : "搜索",
          "oPaginate" : {
              "sFirst" : "首頁",
              "sPrevious" : "上一頁",
              "sNext" : "下一頁",
              "sLast" : "末頁"
          }
      },
      "aoColumnDefs": [
          //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隱藏顯示
          {"orderable":false,"aTargets":[0,2,4]}// 制定列不參與排序
        ]
    });
    
});

/*批量刪除*/
function datadel() {

     layer.confirm('確認要刪除嗎？',function(index){

       var checks = $("input[name='Check[]']:checked");
       if(checks.length == 0){ alert('未選中任何項！');return false;}
       //將獲取的值存入數組
       var checkData = new Array();
       checks.each(function(){
        checkData.push($(this).val());
       });
       var stringid = checkData.toString();//將全部id對象轉爲字符串，
       //console.log(checkData);
       //  console.log(stringid);
        $.ajax({
            type: 'POST',
            url: '',
            dataType: 'json',
            success: function(data){
                //$(obj).parents("tr").remove();
                layer.msg('已刪除!',{icon:1,time:1000});
            },
            error:function(data) {
                console.log(data.msg);
            },
        });   

    });

  
   
  
   
    //var wxid = $("#bindwxid").val();
}


/*資訊-添加*/
function article_add(title,url,w,h){
    var index = layer.open({
        type: 2,
        title: title,
        content: url
    });
    layer.full(index);
}
/*資訊-編輯*/
function article_edit(title,id,w,h){
    var index = layer.open({
        type: 2,
        title: title,
        content: "{:url('Achievementactivity/productadd')}",
    });
    layer.full(index);
}
/*資訊-刪除*/
function article_del(obj,id){
    layer.confirm('確認要刪除嗎？',function(index){
        $.ajax({
            type: 'POST',
            url: '',
            dataType: 'json',
            success: function(data){
                $(obj).parents("tr").remove();
                layer.msg('已刪除!',{icon:1,time:1000});
            },
            error:function(data) {
                console.log(data.msg);
            },
        });     
    });
}

/*資訊-審覈*/
function article_shenhe(obj,id){
    layer.confirm('審覈文章？', {
        btn: ['經過','不經過','取消'], 
        shade: false,
        closeBtn: 0
    },
    function(){
        $(obj).parents("tr").find(".td-manage").prepend('<a class="c-primary" onClick="article_start(this,id)" href="javascript:;" title="申請上線">申請上線</a>');
        $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已發佈</span>');
        $(obj).remove();
        layer.msg('已發佈', {icon:6,time:1000});
    },
    function(){
        $(obj).parents("tr").find(".td-manage").prepend('<a class="c-primary" onClick="article_shenqing(this,id)" href="javascript:;" title="申請上線">申請上線</a>');
        $(obj).parents("tr").find(".td-status").html('<span class="label label-danger radius">未經過</span>');
        $(obj).remove();
        layer.msg('未經過', {icon:5,time:1000});
    }); 
}
/*資訊-下架*/
function article_stop(obj,id){
    layer.confirm('確認要下架嗎？',function(index){
        $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="article_start(this,id)" href="javascript:;" title="發佈"><i class="Hui-iconfont">&#xe603;</i></a>');
        $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已下架</span>');
        $(obj).remove();
        layer.msg('已下架!',{icon: 5,time:1000});
    });
}

/*資訊-發佈*/
function article_start(obj,id){
    layer.confirm('確認要發佈嗎？',function(index){
        $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="article_stop(this,id)" href="javascript:;" title="下架"><i class="Hui-iconfont">&#xe6de;</i></a>');
        $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已發佈</span>');
        $(obj).remove();
        layer.msg('已發佈!',{icon: 6,time:1000});
    });
}
/*資訊-申請上線*/
function article_shenqing(obj,id){
    $(obj).parents("tr").find(".td-status").html('<span class="label label-default radius">待審覈</span>');
    $(obj).parents("tr").find(".td-manage").html("");
    layer.msg('已提交申請，耐心等待審覈!', {icon: 1,time:2000});
}


</script> 
</body>
</html>

View Code

PHP接受處理部分：

  public function productcontent() {
    $arr = $_GET;
    if(!empty($arr)) { 
        //若是是搜索功能
        if(isset($arr['is_serch']) && $arr['is_serch'] == 1 ) {

        }else{

            $draws =  $arr['draw'];
            $sorst_column = $arr['order']['0']['column'];//那一列排序，從0開始
            $sorst_dir = $arr['order']['0']['dir'];//ase desc 升序或者降序
            //排序
             $sorst = '';
            if(isset($sorst_column)) {
                $i = intval($sorst_column);
                switch ($i) {
                    case '1':
                        $sorst = 'id '. $sorst_dir;
                        break;
                    case '3':
                        $sorst = 'status '. $sorst_dir;
                        break;
                    
                    default:
                        $sorst = 'id desc';
                        break;
                }
            }

            $serchs = $arr['search'];
            $serchs = $serchs['value'];//獲取前臺傳過來的過濾條件

            //分頁
            $pagingstart = $arr['start'];//從多少開始
            $paginglength = $arr['length'];//數據長度
           
           
           //開始搜索
           $wheres = '';
           if(strlen($serchs)>0) {
            $wheres = 'name like "%' . $serchs . '%"';
           }

          if($paginglength) {
            $sql = 'select id,title,status from jm_achievement_activity order by ' .$sorst. ' limit '. $pagingstart .',' . $paginglength;
            $list     = Db::query($sql);
          }

          //查找數據總數量
          $countnum = Db::table('achievement_activity')->field('id,title,status')->count();
        //返給表格的固定格式
        $newarr["draw"] = intval($draws);
        $newarr["recordsTotal"] = intval($countnum);
        $newarr["recordsFiltered"] = intval($countnum);
        $newarr["data"] = $list;
     
          return $newarr; 
    }

  }
    return $this->fetch();
       

       
    }

    public function productadd() {
        if (!empty($_POST)) {
            print_r($_POST);
        }
        return $this->fetch();
    }

    public function fileupload() {
        // 獲取表單上傳文件 例如上傳了001.jpg
        $file = request()->file('file');
        // 移動到框架應用根目錄/uploads/ 目錄下
        $info = $file->validate(['ext'=>'jpg,png,gif,jpeg'])->move( './uploads');
       // print_R($info);
        if($info){
            // 成功上傳後 獲取上傳信息
            // 輸出 jpg
            //echo $info->getExtension();
            // 輸出 20160820/42a79759f284b767dfcb2a0197904287.jpg
            $aa = $info->getSaveName();
            return json_encode($aa);
            // 輸出 42a79759f284b767dfcb2a0197904287.jpg
           // echo $info->getFilename();
        }else{
            // 上傳失敗獲取錯誤信息
            echo $file->getError();
        }
    }

    //搜索條件
    public function titlewhere()
    {
        $file = request()->post();

        //條件
        if (empty($file)) {
           $where = 'is_del=0';
        } else {
            $arr = array();
            if (!empty($file['addtime'])) {
                array_push($arr, 'addtime=' . strtotime($file['addtime']));
            }
            if (!empty($file['title'])) {
                array_push($arr, 'title like "%' . $file['title'] . '%"');
            }
            if (!empty($file['status'])) {
                array_push($arr, 'status=' . $file['status']);
            }
            array_push($arr, 'is_del=0');
            $where = implode(' and ', $arr);
            return $where;
        }
    }