Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

anonymouse703's avatar

How to implement Bootstrap DataTable in Livewire?

Hi guys, I'm done in my modal CRUD. I want to use Bootstrap DataTable in projects since it's complete from pagination, search and sorting so I download the bootstrap data table and include in my resources.. I merge the css/js in webpack.mix.

When I tried to use it in app.blade.ph

$(document).ready(function() {
       $('#contactTable').DataTable();
 } );

I got this error

run_customtabs
contact:449 Uncaught TypeError: $(...).DataTable is not a function
    at HTMLDocument.<anonymous> (contact:449)
    at i (main.js:2)
    at Object.fireWith [as resolveWith] (main.js:2)
    at Function.ready (main.js:2)
    at HTMLDocument.J (main.js:2)
0 likes
5 replies
vincent15000's avatar

I don't like Bootstrap datatable, I have done my own.

You have a good tutorial on the Laracast Videos.

anonymouse703's avatar

:) but I make my own script it will make my code long... that's why I need to use the bootstrap table to lessen my code because i have 21 modules (table components) to make.

anonymouse703's avatar

Yeah already saw that.. the problem is I have 21 module (table components) and I don't want to code it in every table component so I decided to use bootstrap DataTable to lessen the code.

Please or to participate in this conversation.