jQuery dataTable 表格插件的后台分页与界面展示

效果：

html部分：

{include file="Public:inner_header" /}

<nav class="breadcrumb"><i class="Hui-iconfont"></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"></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"></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"></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"></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"></i></a> <a style="text-decoration:none" class="ml-5" onClick="article_del(this,'+data.id+')" href="javascript:;" title="删除"><i class="Hui-iconfont"></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"></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"></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>

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;
        }
    }