In Laravel I use the datatable plugin for my tables. For the users view section, because I wanted the administrator to be able to see brief information about that user by clicking on a button on the same page. I used livewire, which by clicking on that button opens a modal with information from that user. But there is a problem, after the modal is opened, the table as a whole becomes a simple table like search or pagination Ever had this problem? Do you have a solution for it?
this is livewire view:
<div>
<table class="datatable-init nk-tb-list nk-tb-ulist" id="jadval" name="jadval">
<thead>
<tr class="nk-tb-item nk-tb-head">
<th class="nk-tb-col">
<span class="sub-text">نام کاربر</span>
</th>
<th class="nk-tb-col tb-col-mb">
<span class="sub-text">موجودی</span>
</th>
<th class="nk-tb-col tb-col-md">
<span class="sub-text">تلفن</span>
</th>
<th class="nk-tb-col tb-col-lg">
<span class="sub-text">وضعیت حساب</span>
</th>
<th class="nk-tb-col tb-col-lg">
<span class="sub-text">آخرین ورود</span>
</th>
<th class="nk-tb-col tb-col-md">
<span class="sub-text">وضعیت</span>
</th>
<th class="nk-tb-col nk-tb-col-tools text-right"></th>
</tr>
</thead>
<tbody>
@foreach ($Users as $user)
<tr class="nk-tb-item" wire:key="{{$user->id}}" wire:ignore>
<td class="nk-tb-col">
<div class="user-card">
<div class="user-info">
<span class="tb-lead">{{$user->name}}
<span class="dot dot-success d-md-none ml-1"></span>
</span>
<span>{{$user->email}}</span>
</div>
</div>
</td>
<td class="nk-tb-col tb-col-mb">
<span class="tb-amount">{{ number_format($user->balance)}}
<span class="currency">تومان</span>
</span>
</td>
<td class="nk-tb-col tb-col-md">
<span>{{$user->mobile}}</span>
</td>
<td class="nk-tb-col tb-col-lg" data-order="Email Verified - Kyc Unverified">
<ul class="list-status">
<li>
@if ($user->isVerified())
<em class="icon text-success ni ni-check-circle"></em>
<span>ایمیل</span>
@else
<em class="icon ni ni-alert-circle"></em>
<span>ایمیل</span>
@endif
</li>
<li>
@if ($user->fullActive())
<em class="icon text-success ni ni-check-circle"></em>
<span> احراز هویت </span>
@else
<em class="icon ni ni-alert-circle"></em>
<span>عدم احراز هویت</span>
@endif
</li>
</ul>
</td>
<td class="nk-tb-col tb-col-lg">
<span>{{jdate($user->last_login_at)}}</span>
</td>
<td class="nk-tb-col tb-col-md">
@if ($user->isActive())
<span class="tb-status text-success">فعال</span>
@else
<span class="tb-status text-danger">غیرفعال</span>
@endif
</td>
<td class="nk-tb-col nk-tb-col-tools">
<ul class="nk-tb-actions gx-1">
<li class="nk-tb-action-hidden">
{{-- <form method="POST" action="http://127.0.0.1:8000/admin/auth/user/2/mark/0" name="confirm-item" class="d-inline">
@csrf
<button typr="button" class="btn btn-trigger btn-icon" data-toggle="tooltip" data-placement="top" title=" غیرفعال کردن">
<em class="icon ni ni-wallet-fill"></em>
</button>
</form> --}}
</li>
<li class="nk-tb-action-hidden">
<button wire:click="selectItem({{$user->id}})" type="button" class="btn btn-trigger btn-icon" data-toggle="tooltip" data-placement="top" title="Send Email">
<em class="icon ni ni-mail-fill"></em>
</button>
</li>
<li class="nk-tb-action-hidden">
<a href="#" class="btn btn-trigger btn-icon" data-toggle="tooltip" data-placement="top" title="Suspend">
<em class="icon ni ni-user-cross-fill"></em>
</a>
</li>
<li>
<div class="drodown">
<a href="#" class="dropdown-toggle btn btn-icon btn-trigger" data-toggle="dropdown">
<em class="icon ni ni-more-h"></em>
</a>
<div class="dropdown-menu dropdown-menu-right">
<ul class="link-list-opt no-bdr">
<li>
<a href="#">
<em class="icon ni ni-focus"></em>
<span>Quick View</span>
</a>
</li>
<li>
<a href="#">
<em class="icon ni ni-eye"></em>
<span>View Details</span>
</a>
</li>
<li>
<a href="#">
<em class="icon ni ni-repeat"></em>
<span>Transaction</span>
</a>
</li>
<li>
<a href="#">
<em class="icon ni ni-activity-round"></em>
<span>Activities</span>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<em class="icon ni ni-shield-star"></em>
<span>Reset Pass</span>
</a>
</li>
<li>
<a href="#">
<em class="icon ni ni-shield-off"></em>
<span>Reset 2FA</span>
</a>
</li>
<li>
<a href="#">
<em class="icon ni ni-na"></em>
<span>Suspend User</span>
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<!-- Modal Content Code -->
<div class="modal fade" tabindex="-1" id="showUserModal" name="showUserModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<a href="#" class="close" data-dismiss="modal" aria-label="Close">
<em class="icon ni ni-cross"></em>
</a>
<p id="idie" name="idie"></p>
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem similique earum necessitatibus nesciunt! Quia id expedita asperiores voluptatem odit quis fugit sapiente assumenda sunt voluptatibus atque facere autem, omnis explicabo.</p>
</div>
<div class="modal-footer bg-light">
<span class="sub-text">Modal Footer Text</span>
</div>
</div>
</div>
</div>
this is datatable code:
NioApp.DataTable = function (elm, opt) {
if ($(elm).exists()) {
$(elm).each(function () {
var auto_responsive = $(this).data('auto-responsive');
var dom_normal = '<"row justify-between g-2"<"col-7 col-sm-6 text-left"f><"col-5 col-sm-6 text-right"<"datatable-filter"l>>><"datatable-wrap my-3"t><"row align-items-center"<"col-7 col-sm-12 col-md-9"p><"col-5 col-sm-12 col-md-3 text-left text-md-right"i>>';
var dom_separate = '<"row justify-between g-2"<"col-7 col-sm-6 text-left"f><"col-5 col-sm-6 text-right"<"datatable-filter"l>>><"my-3"t><"row align-items-center"<"col-7 col-sm-12 col-md-9"p><"col-5 col-sm-12 col-md-3 text-left text-md-right"i>>';
var dom = $(this).hasClass('is-separate') ? dom_separate : dom_normal;
var def = {
responsive: true,
autoWidth: false,
dom: dom,
language: {
search: "",
searchPlaceholder: "برای جستجو تایپ کنید",
lengthMenu: "<span class='d-none d-sm-inline-block'>نمایش</span><div class='form-control-select'> _MENU_ </div>",
info: "_START_ -_END_ از _TOTAL_",
infoEmpty: "اطلاعاتی یافت نشد",
infoFiltered: "( مجموع _MAX_ )",
paginate: {
"first": "اول",
"last": "قبلی",
"next": "بعدی",
"previous": "قبلی"
}
}
},
attr = opt ? extend(def, opt) : def;
attr = auto_responsive === false ? extend(attr, {
responsive: false
}) : attr;
$(this).DataTable(attr);
});
}
};
and i added this code in layout view :
@stack('before-scripts')
<script src="/js/bundle.js?ver=2.2.0"></script>
<script src="/js/scripts.js?ver=2.2.0"></script>
@livewireScripts
<script>
window.addEventListener('name-updated', event => {
$('#showUserModal').modal('show');
$('#idie').text(event.detail.newName);
});
</script>
