laravel - 使用服务器端数据表时在 vue.js 前端添加操作按钮

问题描述

使用服务器端数据表时如何在前端 vue.js 中添加操作按钮？

这是我到目前为止所拥有的，此代码正在运行，但操作按钮在单击时不会发出请求。（警报也不会触发）。操作按钮正在显示并调用 editTaxGroup()

$(document).ready(function() {
            let tax = 1;
            self.dataTable = $("#tax_groups2").DataTable({
                serverSide: true,
                ajax: {
                    "columns": [
                        { "data": "tax_group_name" },
                        { "data": "country.country_name" },
                        { "data": "tax_rate_percentage" },
                         { "data": "Edit" },
                         { "data": "Delete" }
                    ],
                    data: {
                        "token": localStorage.getItem("token"),
                    },
                    url: 'api/v1/get-tax-groups',
                    dataFilter: function(data){
                        var json = jQuery.parseJSON( data );
                        json.recordsTotal = 100;
                        json.recordsFiltered = 100;
                        self.tax_groups = data.data;
                        return JSON.stringify( json ); // return JSON string
                    }
                },
                columns: [
                    {data: "tax_group_name"},
                    {data: "country.country_name",},
                    {data: "tax_rate_percentage"},
                    {data: "Edit"},
                    {data: "Delete"},
                    ],
                "columnDefs": [
                    {
                        "targets": [ -2 ],
                        "data":"id",
                        "defaultContent" : '<a href="#"   id="edit" data-tax="'+tax+'" class="btn btn-outline-warning m-btn m-btn--icon m-btn--icon-only m-btn--pill fd-edit-btn"><i class="fas fa-pen"></i></a>'
                    },
                    {
                        "targets": [ -1 ],
                        "data":"id",
                        "defaultContent" : '<a href="#" class="btn btn-outline-danger m-btn m-btn--icon m-btn--icon-only m-btn--pill fd-delete-btn" @click=deleteTaxGroup(tax_group)><i class="fas fa-trash"></i></a>'
                    }
                ],
            });
        })
        $('#tax_groups2 tbody ').on('click', '#edit', function () {
            for (let key in self.tax_groups){
                alert(1)
                console.log(key);
                if(self.tax_groups.hasOwnProperty(key)){
                    console.log(`${self.tax_groups[key]}`)
                }
           }

        } );
    });
},

标签： laraveldatatables

laravel - 使用服务器端数据表时在 vue.js 前端添加操作按钮

问题描述

解决方案

推荐阅读