Skip to main content

dataTable in laravel without Yajra

Add this following link in the head tag of your project: 

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>


<div class="container">
        <div class="row">
            <div class="col-md-12">
                <table class="table table-bordered" id="posts">
                    <thead>
                            <th>Id</th>
                            <th>Title</th>
                            <th>Body</th>
                            <th>Created At</th>
                            <th>Options</th>
                    </thead>                
                </table>
            </div>
        </div>
    </div>


<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#posts').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax":
                {
                    "url": "{{ url('allposts') }}",
                    "dataType": "json",
                    "type": "POST",
                    "data":{
                        "_token": "{{csrf_token()}}",
                    }
                },
                "columns": [
                    { "data": "id" },
                    { "data": "title" },
                    { "data": "body" },
                    { "data": "created_at" },
                    { "data": "options" }
                ]
            });

            
        });
    </script>

In the controller write:

Route::get('/post','PostController@index');
Route::post('allposts', 'PostController@allPosts' )->name('allposts');



public function index()
    {
        return view('homepage');
    }

    public function allPosts(Request $request)
    {
        
        $columns = array( 
            0 =>'id', 
            1 =>'title',
            2=> 'body',
            3=> 'created_at',
            4=> 'id',
        );
  
        $totalData = Post::count();
            
        $totalFiltered = $totalData; 

        $limit = $request->input('length');
        $start = $request->input('start');
        $order = $columns[$request->input('order.0.column')];
        $dir = $request->input('order.0.dir');
            
        if(empty($request->input('search.value')))
        {            
            $posts = Post::offset($start)
                         ->limit($limit)
                         ->orderBy($order,$dir)
                         ->get();
        }
        else {
            $search = $request->input('search.value'); 

            $posts =  Post::where('id','LIKE',"%{$search}%")
                            ->orWhere('title', 'LIKE',"%{$search}%")
                            ->offset($start)
                            ->limit($limit)
                            ->orderBy($order,$dir)
                            ->get();

            $totalFiltered = Post::where('id','LIKE',"%{$search}%")
                             ->orWhere('title', 'LIKE',"%{$search}%")
                             ->count();
        }

        $data = array();
        if(!empty($posts))
        {
            foreach ($posts as $post)
            {
                // $show =  route('posts.show',$post->id);
                // $edit =  route('posts.edit',$post->id);

                $nestedData['id'] = $post->id;
                $nestedData['title'] = $post->title;
                $nestedData['body'] = substr(strip_tags($post->body),0,50)."...";
                $nestedData['created_at'] = date('j M Y h:i a',strtotime($post->created_at));
                // $nestedData['options'] = "&emsp;<a href='{$show}' title='SHOW' ><span class='glyphicon glyphicon-list'></span></a>
                                        //   &emsp;<a href='{$edit}' title='EDIT' ><span class='glyphicon glyphicon-edit'></span></a>";
                $nestedData['options'] = "&emsp;<a href='#' title='SHOW' ><span class='fa fa-eye'></span></a>
                                          &emsp;<a href='#' title='EDIT' ><span class='fa fa-pencil'></span></a>";
                $data[] = $nestedData;

            }
        }
          
        $json_data = array(
                    "draw"            => intval($request->input('draw')),  
                    "recordsTotal"    => intval($totalData),  
                    "recordsFiltered" => intval($totalFiltered), 
                    "data"            => $data   
                    );
            
        echo json_encode($json_data); 
        
    }


Thanks.







Comments

Post a Comment

Popular posts from this blog

Laravel Vuejs Basic Setup

In this article we will see how to setup vue with laravel. 1) Create a laravel project: laravel new laravue 2) In web.php create a temporary route:  Route :: get ( '/test' ,  function  () {      return   view ( 'welcome' ); }); So, when you will see the welcome page once you hit the  http://laravue.test/test  url. 2) In terminal run:  npm install 3) npm install vue (In package.json file you will see that vue dependency has been added successfully) 4) Now go to resources -> js -> app.js file. Here we will have to load the vue. write the following lines in app.js.  require ( './bootstrap' ); window . Vue  =  require ( 'vue' ); const   app  =  new   Vue ({      el :   '#app' }); (Here, vue js will execute and control anything that will be inside the app id. So, for our example  let's put the app id inside the welcome view). So, inside welcome.blade.php 's body...
Post a Comment
Read more