How to recreate backpack table on a separate html view?

[mobi35]

crud controller

CRUD::addField([ 'name' => 'table', 'type' => 'view', 'view' => 'table_overview', 'tab' => 'Banners', 'wrapper' => [ 'class' => 'form-group col-md-12', ], 'value' => Banner::query()->where('campaign_id', $this->crud->getCurrentEntryId())->get() ]);

I got a field like this.

table_overview.blade.php

   `<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
  
  <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js" ></script>
  
    <link rel="stylesheet" type="text/css" href="{{ asset('packages/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('packages/datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('packages/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}">
  
  
  @php
  
  $data = old_empty_or_null($field['value'], []) ?? $field['value'] ?? [];
  
  
  @endphp
  
  
  <table id="crudTable" class="bg-white table table-striped table-hover nowrap rounded shadow-xs border-xs mt-2 dataTable dtr-inline" style="width:100%; position:relative;">
          <thead>
              <tr>
                  <th>Name</th>
                  <th>Location</th>
                  <th>Clicks</th>
                  <th>Date Start</th>
                  <th>Date End</th>
                  <th>Url</th>
              </tr>
          </thead>
          <tbody>

        @foreach ($data as $item )

        @php 

        $url = "/admin/banner/{$item->id}/edit";

        @endphp

        <tr> 
        <td> <a href="{{$url}}" > {{ $item->name }}  </a> </td>
        <td>  {{ $item->banner_location?->full_class_code }} </td>
        <td>  {{ $item->clicks }} </td>
        <td>  {{ $item->date_start }} </td>
        <td>  {{ $item->date_end }} </td>
        <td>  {!! ($item?->url == null || $item->url == "") ? '' : "<a href=\"{$item->url}\">url</a>" !!} </td>
    

        @php

            $show = true;

            $campaign_check = \App\Models\Campaign::find($item->campaign_id);

            if ($item->campaign == null) {

                if ($campaign_check == null) {
                    $item->campaign_id = null;
                    $item->save();
                }

            $show = true;

            } else if (CRUD::getCurrentEntryId() != $item->campaign?->id) {
                $show = false;

            }

        @endphp


        @php

        $string = $show ? "<a onclick=\"add({$item->id})\" href=\"#\"> add </a>" : '';

        @endphp


        </tr>
        @endforeach
   
    </tbody>
  
</table>




<script>


 $('#crudTable').DataTable();


 function add(id)
 {


    let selectedBanners = $(".select2_multiple").val() || [];
    selectedBanners.push(id.toString());


    $('.select2_multiple').val(null).trigger('change');

    setTimeout(function() {

        $('.select2_multiple').val(selectedBanners).trigger('change');

    }, 10);

    return false;


}

</script>


  <style>
    .paginate_button {
        padding-left: 4px;
        padding-right: 4px;
        margin-left: 3px;
        margin-right: 3px;
        cursor: pointer;
    }
    #crudTable .sorting::before { 
        display:none;
    }

    #crudTable .sorting::after {
        display:none;
    }

    #crudTable {
        /* width: 200px!important; */
        /* max-width: 200px; */
    }

    /* #crudTable td {
        width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    } */

    </style>

`

It works, but the table styling isn't the same with backpack, This is just a workaround, I'm not sure if my implementation is the right way.

[o15a3d4l11s2]

Is your custom view inside the admin area (inside Backpack)? If so, you can use the same view that Backpack uses for the basic functionality:

@extends(backpack_view('blank'))

@section('content')
@endsection

This is just the empty skeleton, you can see real examples here: Create view (this is simpler view), List view (this one has sections for styles and scripts). Since you want to load a specific field, Create view would be closer to your requirements.

There is an older StackOverflow discussion for Backpack 4, which might also give you some hints.