DataTable ajax动态获取后台数据

最新推荐文章于 2022-08-03 01:55:43 发布

鱼之乐-子焉知

最新推荐文章于 2022-08-03 01:55:43 发布

阅读量811

点赞数

分类专栏： datatable ajax laravel 文章标签： datatable插件的ajax请求服务器

本文链接：https://blog.youkuaiyun.com/qq_35770969/article/details/80989261

版权

本文介绍如何在HTML页面中利用DataTable插件结合Ajax技术，从Laravel后端动态获取并展示数据。通过Blade模板语法设置表格结构，然后在JavaScript部分配置DataTable的Ajax请求，调用PHP控制器获取服务器上的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码（采用的是laravel 的blade模板语法）：

@extends('layouts.common')
@section('title',$title)

@section('css')
    <style>
        .row ,#selector,#date{
            font-size: 11px;
        }
        @media (min-width: 768px){
            .dl-horizontal dd {
                margin-left: 160px;
            }
        }
        .manual{
            font-size: 10px;
        }

    </style>
@endsection

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">人工管理列表</h3>
                            <div class="cl pd-5 bg-1 bk-gray">
                                <hr/>
                            </div>
                            <div class="cl pd-5 bg-1 bk-gray">
                                <span class="l">
                                    <a href="javascript:;" onclick="batchEdit()" class="btn btn-danger radius">批量处理</a>
                                </span>
                            </div>
                            <div class="cl pd-5 bg-1 bk-gray">
                                <hr/>
                            </div>

                            <div class="col-xs-12 col-md-8 col-lg-11">
                                <div class="col-xs-6 col-md-2 col-lg-2 form-group">
                                    <select class="form-control" name="order_status" id="selector">
                                        <option value="">请选择订单状态:</option>
                                        <option value="1" style="color: #1e90ff;">下单成功</option>
                                        <option value="2" style="color: #00bfff;">通知(供)下单成功</option>
                                        {
  {--<option value="3" style="color: green;">充值成功</option>--}}
                                        {
  {--<option value="4" style="color: red;">充值失败</option>--}}
                                    </select>
                                </div>
                                <div class="col-xs-6 col-md-2 col-lg-2 form-group">
                                    <select class="form-control" name="manual_status" id="selector">
                                        <option value="">人工状态:</option>
                                        <option value="10" style="color: red;">未处理</option>
                                        <option value="1" style="color: green;">已处理</option>
                                    </select>
                                </div>
                                <div class="col-xs-6 col-md-2 col-lg-2 form-group">
                                    <select class="form-control" name="provider_id"  id="selector">
                                        <option value=" ">请选择供应商：</option>
                                        @foreach($providers as $item)
                                            <option value="{
  {$item->provider_id}}">{
  {$item->provider_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-xs-6 col-md-2 col-lg-3 form-group">
                                    <input type="text" class="form-control laydate-icon" value="" placeholder="请选择时间段" id="date">
                                </div>
                                <div class="col-xs-3 col-md-2 col-lg-1"  >

最低0.47元/天解锁文章