首页 > 其他分享> > datatables分页+搜索

datatables分页+搜索

2021-03-14 22:04:00 作者：互联网

<!DOCTYPE html>
<html>
<head>
    <title>dataTables 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">

    <form onsubmit="return search()" >
        文章标题:
        <input type="text" class="input-text" style="width:250px;" value="" id="title"  >
        <button type="submit" class="btn btn-success" id="" name=""><i class="icon-search"></i> 搜索文章</button>
    </form>

<!--第二步：添加如下 HTML 代码-->
    <table id="table_id_example" class="display">
        <thead>
        <tr>
            <th>ID</th>
            <th>标题</th>
            <th>作者</th>
            <th>添加时间</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

</div>
</body>
</html>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script>
    function search() {
        // 手动调用一次dataTable插件请求
        dataTable.ajax.reload();
        //取消表单默认行为
        return false;
    }

    var dataTable = $('#table_id_example').DataTable({
        // 每页显示的条数
        "lengthMenu": [ 5, 8, 10, 15],
        // 是否开启本地搜索
        searching: false,
        //开启服务器模式
        serverSide: true,
        // 发送ajax请求数据
        ajax: {
            type: "get",
            url: "{:url('article/article/index')}",
            // 发送数据
            data: function (ret) {
                ret.title = $.trim($('#title').val());
            },
        },
        // 输出数据
        columns: [
            // defaultContent 和 className 可选参数
            {'data': 'id'},
            {'data': 'title'},
            {'data': 'author'},
            {'data': 'created_at'},
        ]
    });

</script>

 public function index(Request $request)
    {
        if ($request->isAjax()){
            $count = \app\article\model\Article::count();
            // 获取查询的起始位置
            $start = $request->get("start")?:0;
            // 获取每页显示的条数
            $length = min(100,$request->get("length",5));
            // 获取文章的标题内容
            $title = $request->get("title");
            $data = \app\article\model\Article::limit($start,$length)->select();
            // 判断是否传入标题
            if (!empty($title)){
                // 模糊查询
                $data = \app\article\model\Article::where("title","like","%$title%")->limit($start,$length)->select();
            }
            // 组装返回信息
            $result = [
                // 客户端调用服务器端次数标识
                'draw' => $request->get('draw'),
                // 获取记录的总条数
                'recordsTotal' => $count,
                // 数据过滤后的总数量
                'recordsFiltered' => $count,
                // 查询的数据
                'data' => $data
            ];
            return json($result);
        }
        return view("index");
    }

标签：datatables,title,get,request,length,搜索,article,data,分页
来源： https://www.cnblogs.com/ying0424/p/14534465.html