So, here is the code

@extends('layouts.main')

@section('additional_css')
    <link rel="stylesheet" href="{{ asset('css/leads.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/brand.css') }}" />
@endsection

@section('title', 'Brand (New Branch)')

@section('content')
        <h1>Brand (New Branch)</h1>
        <section >
            <div >
                <table >
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Brand Name</th>
                            <th>Instagram Account</th>
                            <th>Daily Sales</th>
                            <th>Location</th>
                            <th>Has Physical Store</th>
                            <th>Has Online Marketplace</th>
                            <th>Campaign Name</th>
                            <th>Channel Source</th>
                            <th>Tagging</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </section>
@endsection

@section('additional_js')
<script src="{{ asset('vendors/dataTables/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendors/dataTables/js/dataTables.bootstrap4.min.js') }}"></script>
@endsection

@section('script')
<script>
    $(document).ready(function() {
        $('.table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route('leads.newBranch.paginate') }}',
                dataType: 'json',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}' }
            },
            columns: [
                { data: 'name', name: 'name' },
                { data: 'email', name: 'email' },
                { data: 'phone_number', name: 'phone_number'},
                { data: 'brand_name', name: 'brand_name'},
                { data: 'instagram_account', name: 'instagram_account'},
                { data: 'daily_sales', name: 'daily_sales'},
                { data: 'locations', name: 'locations'},
                { data: 'has_physical_outlet', name: 'has_physical_outlet'},
                { data: 'has_online_marketplace', name: 'has_online_marketplace'}
            ]
        });
    })
</script>
@endsection

If the code is ran, then in the has_physical_outlet and has_online_marketplace column will show either 1 or 0 (data taken from a form). Which in this case, I wanted change it so that it will show either message of "yes" (if the data itself is 1) or "no" (if the data is 0) in the column.

Does anyone know how the correct way to do it since I am unfamiliar with Ajax?. Any help is appreciated and thank you in advance

CodePudding user response：

you can add render method to specific column options

    $(document).ready(function() {
        $('.table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route('leads.newBranch.paginate') }}',
                dataType: 'json',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}' }
            },
            columns: [
                { data: 'name', name: 'name' },
                { data: 'email', name: 'email' },
                { data: 'phone_number', name: 'phone_number'},
                { data: 'brand_name', name: 'brand_name'},
                { data: 'instagram_account', name: 'instagram_account'},
                { data: 'daily_sales', name: 'daily_sales'},
                { data: 'locations', name: 'locations'},
                { 
                  data: 'has_physical_outlet', 
                  name: 'has_physical_outlet', 
                  render: function (data, type) {
                    if (type === 'display') {
                      return data ? 'yes' : 'no'
                    }
                    return data;
                  }
                },
                { 
                  data: 'has_online_marketplace', 
                  name: 'has_online_marketplace', 
                  render: function (data, type) {
                    if (type === 'display') {
                      return data ? 'yes' : 'no'
                    }
                    return data;
                  }
                }
            ]
        });
    })