lianurfadilah
1 month ago

Select ajax and show all data in data table

Posted 1 month ago by lianurfadilah

how to display all data in data table by using select ajax? in the results of my experiment, only one data was displayed

@extends('layouts.layout')
@section('content')


<div class="main-panel">
  <div class="content-wrapper"> 
    

    <div class="row"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-12 grid-margin">
       <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
            <h4 class="card-title">Data Perkomoditi</h4>

            <div class="col-lg-3 ">
                <select  class="form-control" id="jenis" style="border-radius: 10px;">
                    <option selected>Pilih Jenis Komoditi</option>
                    @foreach($dataCommodity as $value)
                    <option value="{{$value->id}}" name="id_kind">{{$value->kind_name}}</option>
                    @endforeach
                </select>
            </div>

            <br>
            <div class="row">
                <div class="col-12">
                <div class="table-responsive">
                    <table id="order-listing" class="table">
                    <thead>
                        <tr>
                            <th class="sortStyle">Nama Pasar</th>
                            <th class="sortStyle">Harga Kemarin</th>
                            <th class="sortStyle">Harga Sekarang</th>
                            <th class="sortStyle">Rata-rata saat ini</th>        
                        </tr>
                    </thead>
                    <tbody>
                        
                        <tr data-id="" class="sub_menu waves-effect" name="id_kind">
                            <td id="nama_pasar"></td>
                            <td id="harga_kmrn"></td>
                            <td id="harga_skrg"></td>
                            <td id="rata_rata"></td>
                        </tr>
                        
                    </tbody>
                    </table>
                </div>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript">
    $("#jenis").change(function(){
        var id_kind = $(this).val();
        $.ajax({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "{{url ('search-kind') }}",
            method: 'GET',
            data: {id_kind: id_kind, _token: $('meta[name="csrf-token"]').attr('content')},
            success: function(data) {
            // console.log(data);
                // document.getElementById("id").innerHTML = data.id
                document.getElementById("nama_pasar").innerHTML = data.nama_pasar
                document.getElementById("harga_kmrn").innerHTML = data.harga_kmrn
                document.getElementById("harga_skrg").innerHTML = data.harga_skrg
                document.getElementById("rata_rata").innerHTML  = data.rata
                
            },
    });
});
</script>
@endsection

Please sign in or create an account to participate in this conversation.