EasyUI With Larvel

[dewan]

Hi

Is there a  tutorial on laravel ? I cant make the pagination work in laravel.

Thank you

[stworthy]

The EasyUI for jQuery is a pure javascript library. Include the jQuery and EasyUI library and then put this line to create a pagination component.

Code:

<div class="easyui-pagination" data-options="total:114"></div>

[dewan]

In pagination when i click next nothing happens . How can i over write the next button to fetch more data
//CLIENT
<table id="tt" class="easyui-datagrid"
               method="get"
               url="product_master"
               rownumbers="true"
               fitColumns="true"
               singleSelect="true"
               resizeEdge="true"
               nowrap="true"
               title="Product Master"
               pagination="true"
               style="width:100%;height:600px;margin-right: auto">

            <thead>
            <tr>
                <th field="item_id" width="50">ItemId</th>
                <th field="name" width="50">Name</th>
                <th field="description" width="50">Description</th>
                <th field="unit" width="50">Unit</th>
                <th field="price" width="50">Price</th>
                <th field="item_group" width="50">ItemGroup</th>
                <th field="price_group" width="50">PriceGroup</th>
                <th field="tax_code" width="50">TaxCode</th>
                <th field="tax_percent" width="50">TaxPercent</th>
                <th field="discount_amount" width="50">DiscountAmount</th>
                <th field="discount_percent" width="50">DiscountPercent</th>
                <th field="image" width="50">Image</th>
                <th field="barcode" width="50">Barcode</th>
                <th field="company_id" width="50">CompanyId</th>
                <th field="sync" width="50">Sync</th>
            </tr>

            </thead>

        </table>

//SERVER SIDE

public function getProduct(Request $request){
        $user = Auth::user();
        $page = $request->page;
        $length = $request->rows;
        if ($page == 1){
            $data = Product::where('company_id','=',$user->company_id)
                ->limit($length)
                ->get();
        }
        else{
            $data = Product::where('company_id','=',$user->company_id)
                ->offset($length)
                ->limit($length)
                ->get();
        }


        return response()->json($data,200);
    }

Thank you

[stworthy]

Please set the 'method' to 'POST'. Make sure the 'page' and 'rows' parameters reach your server side. The returned data should have 'total' and 'rows' properties. It looks like this:

Code:

{"total":110,"rows":[{...},...]}

[dewan]

thanks but after i test for may time i did not found any solution .
The POST does not work as i cant set the CSRF token in header .

and the GET request response does not contain rows
{"current_page":1,"data":[{"id":1,"item_id":"11001","name":"testItemName1","description":"Test1","unit":"PCS","price":12,"item_group":"Group1","price_group":"Jusco","tax_code":"SR","tax_percent":6,"discount_amount":0,"discount_percent":2,"image":"test.jpg","barcode":"123456","company_id":"100","sync":0,"created_at":"2018-04-23 00:00:00","updated_at":"2018-04-23 00:00:00"},{"id":2,"item_id":"11002","name":"testItemName2","description":"Test2","unit":"PCS","price":13,"item_group":"Group1","price_group":"Jusco","tax_code":"SR","tax_percent":6,"discount_amount":0,"discount_percent":2,"image":"test.jpg","barcode":"123457","company_id":"100","sync":0,"created_at":"2018-04-23 00:00:00","updated_at":"2018-04-23 00:00:00"},{"id":3,"item_id":"11003","name":"testItemName3","description":"Test3","unit":"PCS","price":14,"item_group":"Group1","price_group":"Jusco","tax_code":"SR","tax_percent":6,"discount_amount":0,"discount_percent":2,"image":"test.jpg","barcode":"123458","company_id":"100","sync":0,"created_at":"2018-04-23 00:00:00","updated_at":"2018-04-23 00:00:00"},{"id":4,"item_id":"11004","name":"testItemName4","description":"Test4","unit":"PCS","price":15,"item_group":"Group1","price_group":"Jusco","tax_code":"SR","tax_percent":6,"discount_amount":0,"discount_percent":2,"image":"test.jpg","barcode":"123459","company_id":"100","sync":0,"created_at":"2018-04-23 00:00:00","updated_at":"2018-04-23 00:00:00"},{"id":5,"item_id":"11005","name":"testItemName5","description":"Test5","unit":"PCS","price":16,"item_group":"Group1","price_group":"Jusco","tax_code":"SR","tax_percent":6,"discount_amount":0,"discount_percent":2,"image":"test.jpg","barcode":"123460","company_id":"100","sync":0,"created_at":"2018-04-23 00:00:00","updated_at":"2018-04-23 00:00:00"},{"id":6,"item_id":"11006","name":"testItemName6","description":"Test6","unit":"PCS","price":17,"item_group":"Group1","price_group":"Jusco","tax_code":"SR","tax_percent":6,"discount_amount":0,"discount_percent":2,"image":"test.jpg","barcode":"123461","company_id":"100","sync":0,"created_at":"2018-04-23 00:00:00","updated_at":"2018-04-23 00:00:00"},{"id":7,"item_id":"11007","name":"testItemName7","description":"Test7","unit":"PCS","price":18,"item_group":"Group1","price_group":"Jusco","tax_code":"SR","tax_percent":6,"discount_amount":0,"discount_percent":2,"image":"test.jpg","barcode":"123462","company_id":"100","sync":0,"created_at":"2018-04-23 00:00:00","updated_at":"2018-04-23 00:00:00"},{"id":8,"item_id":"11008","name":"testItemName8","description":"Test8","unit":"PCS","price":19,"item_group":"Group2","price_group":"Jusco","tax_code":"SR","tax_percent":6,"discount_amount":0,"discount_percent":2,"image":"test.jpg","barcode":"123463","company_id":"100","sync":0,"created_at":"2018-04-23 00:00:00","updated_at":"2018-04-23 00:00:00"},{"id":9,"item_id":"11009","name":"testItemName9","description":"Test9","unit":"PCS","price":20,"item_group":"Group2","price_group":"Jusco","tax_code":"SR","tax_percent":6,"discount_amount":0,"discount_percent":2,"image":"test.jpg","barcode":"123464","company_id":"100","sync":0,"created_at":"2018-04-23 00:00:00","updated_at":"2018-04-23 00:00:00"},{"id":10,"item_id":"11010","name":"testItemName10","description":"Test10","unit":"PCS","price":21,"item_group":"Group2","price_group":"Jusco","tax_code":"SR","tax_percent":6,"discount_amount":0,"discount_percent":2,"image":"test.jpg","barcode":"123465","company_id":"100","sync":0,"created_at":"2018-04-23 00:00:00","updated_at":"2018-04-23 00:00:00"}],"first_page_url":"http:\/\/vansales.com\/product_master?page=1","from":1,"last_page":2,"last_page_url":"http:\/\/vansales.com\/product_master?page=2","next_page_url":"http:\/\/vansales.com\/product_master?page=2","path":"http:\/\/vansales.com\/product_master","per_page":"10","prev_page_url":null,"to":10,"total":20}

If you have any solution please let me know

[stworthy]

Please define the 'loadFilter' function to convert your data to the expected format.

Code:

  <table id="tt" class="easyui-datagrid"
               data-options="
                loadFilter: function(data){
                  return {
                    total:data.total,
                    rows:data.data
                  };
                }
               "

[dewan]

thank you its working now..
How can i add the inline editing to this table

thank you

[stworthy]

Please look at this tutorial https://www.jeasyui.com/tutorial/app/crud2.php

[dewan]

is the plugin included free version ? Nothing happens when i double click on the cell

thank you

[stworthy]

Please download it from https://www.jeasyui.com/extension/edatagrid.php

[dewan]

thank you its working great. I have also added the filter  plugin  i can see the filter option but nothing happens
below is my code

@extends('layouts/theme')

@section('content')
    <div class="col-sm-12" id="download" style="margin-bottom: 5px;margin-left:0px;margin-top: 8px">
        <a href="{{ URL::to('/prices/downloadExcel/xlsx') }}">
            <button class="btn btn-success btn-sm">
                <span class="glyphicon glyphicon-download"></span> Download
            </button>
        </a>
    </div>
   {{-- <div class="row" id="grid_view">
        <div class="col-sm-12" style="margin-bottom: 10px;margin-left:10px;">
            {!! $phpgrid_output !!}
            <script>
                $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
            </script>
        </div>

    </div> --}}
    <div class="continer">
        <div id="tb" style="padding:3px">
            <span>Item ID:</span>
            <input id="itemid" style="line-height:26px;border:1px solid #ccc">
            <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
        </div>

        <table id="tt" class="easyui-datagrid"
               data-options="
                loadFilter: function(data){
                  return {
                    total:data.total,
                    rows:data.data
                  };
                }
               "
               method="get"
               rownumbers="true"
               fitColumns="true"
               singleSelect="true"
               resizeEdge="true"
               nowrap="true"
               title="Price Master"
               pagination="true"
               toolbar="#toolbar"
               idField="id"
               filterable="true"
               style="width:100%;height:600px;margin-right: auto">

            <thead>
            <tr>
                <th field="item_id" width="50" sortable="true"">ItemId</th>
                <th field="name" width="50" sortable="true" editor="text">Name</th>
                <th field="unit" width="50" sortable="true" editor="text">Unit</th>
                <th field="qty" width="50" sortable="true" editor="text">Qty</th>
                <th field="price" width="50" sortable="true" editor="text">Price</th>
                <th field="item_group" width="50" sortable="true" editor="text">ItemGroup</th>
                <th field="price_group" width="50" sortable="true" editor="text">PriceGroup</th>
                <th field="from_date" width="50" sortable="true" editor="text">FromDate</th>
                <th field="to_date" width="50" sortable="true" editor="text">ToDate</th>
                <th field="status" width="50" sortable="true" editor="text">Status</th>
                <th field="company_id" width="50" editor="text">CompanyId</th>
                <th field="sync" width="50" editor="text">Sync</th>
            </tr>

            </thead>

        </table>
        <div id="toolbar">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
               onclick="javascript:$('#tt').edatagrid('addRow')">New</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
               onclick="javascript:$('#tt').edatagrid('destroyRow')">Destroy</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"
               onclick="javascript:$('#tt').edatagrid('saveRow')">Save</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true"
               onclick="javascript:$('#tt').edatagrid('cancelRow')">Cancel</a>
        </div>

    </div>

@stop

@section('javascript')
    <script>

        function doSearch() {
            $('#tt').datagrid('load', {
                item_id: $('#itemid').val()
            });
        }

        $(function(){
            $('#tt').edatagrid({
                url:"price_master",
                saveUrl: '',
                updateUrl: '',
                destroyUrl: ''
            });
        });

        $(function(){
            var dg = $('#tt').datagrid({
                filterBtnIconCls:'icon-filter'
            });
            dg.datagrid('enableFilter', [{
                field:'item_id',
                type:'numberbox',
                options:{precision:0},
                op:['equal','notequal','less','greater']

            }]);


        });


    </script>

@stop

[stworthy]

Please try to apply this 'loadFilter' function.

Code:

loadFilter: function(data){
    if (data.total && data.rows){
        return data;
    } else {
        return {
            total:data.total,
            rows:data.data
        };
    }
}

[dewan]

thank you so much its working great now. This has make my life easier