init

 <header class="navbar-wrapper">
 <header class="navbar-wrapper">
     <div class="navbar navbar-fixed-top">
     <div class="navbar navbar-fixed-top">
-        <div class="container-fluid cl"> <a class="logo navbar-logo f-l mr-10 hidden-xs" href="/">xxx 管理平台</a>
+        <div class="container-fluid cl"> <a class="logo navbar-logo f-l mr-10 hidden-xs" href="/">管理平台</a>
             <a class="logo navbar-logo-m f-l mr-10 visible-xs" href="/">H-ui</a>
             <a class="logo navbar-logo-m f-l mr-10 visible-xs" href="/">H-ui</a>
             <span class="logo navbar-slogan f-l mr-10 hidden-xs"></span>
             <span class="logo navbar-slogan f-l mr-10 hidden-xs"></span>
             <a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:;">&#xe667;</a>
             <a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:;">&#xe667;</a>

@@ -15,46 +15,96 @@
                     </tr>
                     </tr>
                 </thead>
                 </thead>
                 <tbody class="text-c">
                 <tbody class="text-c">
-                    <tr>
-                        <td>
-                            <span class="dropDown dropDown_hover">
-                                <button class="btn radius size-M">请选择 <i class="Hui-iconfont">&#xe6d5;</i></button>
-                                <ul class="dropDown-menu menu radius box-shadow">
-                                    <li><a href="javascript:;" onclick="creatIframe('<?=site_url('/user/info')?>', '查看详细')">查看详细</a></li>
-                                </ul>
-                            </span>
-                        </td>
-                        <td>1001</td>
-                        <td>张三</td>
-                        <td>333333333333333333</td>
-                        <td>13333333333</td>
-                        <td>2018-01-01 00:00:00</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <span class="dropDown dropDown_hover">
-                                <button class="btn radius size-M">请选择 <i class="Hui-iconfont">&#xe6d5;</i></button>
-                                <ul class="dropDown-menu menu radius box-shadow">
-                                    <li><a href="javascript:;" onclick="creatIframe('<?=site_url('/user/info')?>', '查看详细')">查看详细</a></li>
-                                </ul>
-                            </span>
-                        </td>
-                        <td>1002</td>
-                        <td>张三</td>
-                        <td>333333333333333333</td>
-                        <td>13333333333</td>
-                        <td>2018-01-01 00:00:00</td>
-                    </tr>
                 </tbody>
                 </tbody>
             </table>
             </table>
         </div>
         </div>
     </div>
     </div>
     <?php $this->load->view('common/footer'); ?>
     <?php $this->load->view('common/footer'); ?>
-
     <script>
     <script>
-    var table = $('#table').dataTable({
-        aaSorting: [[1, "desc"]]
-    });
+        var table = $('#table').dataTable({
+            aaSorting: [[1, "desc"]],
+            serverSide: true,
+            processing: true,
+            bSort: false,
+            searching: false,//是否显示搜索
+            iDisplayLength: 6,
+            bLengthChange: false,
+            ajax: {
+                url: apiBaseUrl + '/client/clients',
+                dataFilter: function (json) {
+                    var ret = {}, json = jQuery.parseJSON(json);
+                    ret.data = json.data || [];
+                    var draw = getUrlParam('draw');
+                    if(draw) {
+                        ret.draw = draw;
+                    }
+                    ret.recordsTotal = 0;
+                    ret.recordsFiltered = 0;
+                    if (json.page) {
+                        ret.recordsTotal = parseInt(json.page.totalNumber);
+                        ret.recordsFiltered = parseInt(json.page.totalNumber);
+                    }
+                    return JSON.stringify(ret);
+                },
+                data: function (data) {
+                    data.pageSize = data.length;
+                    data.currentPage = parseFloat(data.start / data.length) + 1;
+                    return data;
+                }
+            },
+            columns: [
+                {
+                    data: "id", render: function (data, type, full) {
+
+                        var url = "<?=site_url('/user/info')?>";
+                        return '<span class="dropDown dropDown_hover">\
+                         <button class="btn radius size-M">请选择 <i class="Hui-iconfont">&#xe6d5;</i></button>\
+                            <ul class="dropDown-menu menu radius box-shadow">\
+                        <li><a href="javascript:;" onclick="creatIframe(\''+url+'\', \'查看详细\')">查看详细</a></li>\
+                        </ul></span>';
+                    }
+                },
+                {data: "id"},//客户编号
+                {data: "userName"},//姓名
+                {data: "idCard"},//身份证
+                {data: "phoneNumber"},//手机号
+                {data: "createTime"}//录入时间
+            ]
+        });
+
+        $.fn.dataTableExt.afnFiltering.push(
+            function (oSettings, aData, iDataIndex) {
+                var min = document.getElementById('min').value;
+                var max = document.getElementById('max').value;
+                var iDateCol = 12;
+
+                var dateMin = new Date(aData[iDateCol]);
+                var dateMax = new Date(aData[iDateCol]);
+
+                if (min === '' && max === '')
+                    return true;
+                else if (new Date(min).getTime() <= dateMin.getTime() && max === '')
+                    return true;
+                else if (new Date(min).getTime() <= dateMin.getTime() && new Date(max).getTime() >= dateMax.getTime())
+                    return true;
+                return false;
+            }
+        );
+
+        $('.table_search').on('change', function () {
+            search = $(this).val();
+            column = $(this).attr('column');
+
+            $('#table').DataTable().column(column).search(search).draw();
+        });
+
+        $('#min, #max').on('keyup', function () {
+            $('#table').DataTable().draw();
+        });
+
+        function resetHandler() {
+            $('#table').DataTable().columns().search("").draw();
+        }
     </script>
     </script>
 </body>
 </body>
 <html>
 <html>