title: How to apply datatables using Vuejs with Laravel
body: <p>I am populating table but now I want to apply pagination, searching, filter criteria. I am new to Vue, how I can apply into my code?</p>
  <p>Below is my Vue file:</p>
  <pre><code>&lt;template&gt;
  
      &lt;div&gt;
          &lt;!-- Content Header (Page header) --&gt;
          &lt;div class=&quot;content-header&quot;&gt;
              &lt;div class=&quot;container-fluid&quot;&gt;
                  &lt;div class=&quot;row mb-2&quot;&gt;
                      &lt;div class=&quot;col-sm-6&quot;&gt;
                          &lt;h1 class=&quot;m-0 text-dark&quot;&gt;Logs&lt;/h1&gt;
                      &lt;/div&gt;&lt;!-- /.col --&gt;
                      &lt;div class=&quot;col-sm-6&quot;&gt;
                          &lt;ol class=&quot;breadcrumb float-sm-right&quot;&gt;
                              &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                              &lt;li class=&quot;breadcrumb-item active&quot;&gt;Logs&lt;/li&gt;
                          &lt;/ol&gt;
                      &lt;/div&gt;&lt;!-- /.col --&gt;
                  &lt;/div&gt;&lt;!-- /.row --&gt;
              &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
          &lt;/div&gt;
          &lt;!-- /.content-header --&gt;
  
          &lt;!-- Main content --&gt;
          &lt;div class=&quot;content&quot;&gt;
  
              &lt;div class=&quot;container-fluid&quot;&gt;
  
                  &lt;div class=&quot;row&quot;&gt;
  
                      &lt;div class=&quot;col-lg-12&quot;&gt;
                          &lt;div class=&quot;card&quot;&gt;
                              &lt;div class=&quot;card-header&quot;&gt;
                                  &lt;h3 class=&quot;card-title&quot;&gt;&lt;/h3&gt;
                              &lt;/div&gt;
                              &lt;!-- /.card-header --&gt;
                              &lt;div class=&quot;card-body table-responsive p-0&quot; style=&quot;width: 1000px;&quot;&gt;
                                  &lt;table class=&quot;table table-hover&quot;&gt;
                                      &lt;thead&gt;
                                      &lt;tr&gt;
                                          &lt;th&gt;ID&lt;/th&gt;
                                          &lt;th&gt;User Id&lt;/th&gt;
                                          &lt;th&gt;Message Title&lt;/th&gt;
                                          &lt;th&gt;Process Type&lt;/th&gt;
                                          &lt;th&gt;Description&lt;/th&gt;
                                          &lt;th&gt;Data Load&lt;/th&gt;
                                          &lt;th&gt;Message Code&lt;/th&gt;
                                          &lt;th&gt;Log Type&lt;/th&gt;
                                      &lt;/tr&gt;
                                      &lt;/thead&gt;
                                      &lt;tbody&gt;
                                      &lt;tr v-for=&quot;socket in sockets&quot;&gt;
                                          &lt;td&gt;{{socket.id}}&lt;/td&gt;
                                          &lt;td&gt;{{socket.user_id}}&lt;/td&gt;
                                          &lt;td&gt;{{socket.message_title}}&lt;/td&gt;
                                          &lt;td&gt;{{socket.process_type}}&lt;/td&gt;
                                          &lt;td&gt;{{socket.description}}&lt;/td&gt;
                                          &lt;td&gt;{{socket.data_load}}&lt;/td&gt;
                                          &lt;td&gt;{{socket.msg_code}}&lt;/td&gt;
                                          &lt;td&gt;{{socket.log_type}}&lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
                              &lt;/div&gt;
                              &lt;!-- /.card-body --&gt;
                          &lt;/div&gt;
                          &lt;!-- /.card --&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;!-- /.container-fluid --&gt;
  
          &lt;/div&gt;
          &lt;!-- /.content --&gt;
  
      &lt;/div&gt;
  
  &lt;/template&gt;
  </code></pre>
  <p>This is my script where I am getting all the data from my database.</p>
  <pre><code>    &lt;script&gt;
      
          export default {
      
              data() {
      
                  return {
                      sockets: [],
                      form: new Form({
                          'user_id': '',
                          'message_title': '',
                          'process_type': '',
                          'description': '',
                          'data_load': '',
                          'msg_code': '',
                          'log_type': '',
                      })
                  }
      
              },
      
      
              created() {
                  axios.get('/message')
                      .then(({data}) =&gt; this.sockets = data);
              },
      
              methods: {
                  onSubmit(){
                      //this.form.password_confirmation = this.form.password; // Temp for this form only.
                      this.form
                          .post('/message')
                          .then(socket =&gt; this.sockets.push(socket));
                  }
              }
          }
      
      &lt;/script&gt;
  </code></pre>
  <p>I also add the screen shot:</p>
  <p><a href="https://i.stack.imgur.com/HE3oP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HE3oP.png" alt="enter image description here" /></a></p>