使用 spring mvc 向 jquery 数据表添加编辑和删除按钮

Question

我想为jquery数据表的每一行添加编辑和删除按钮，例如，我想在每次更新和删除时更新数据库。 我已经用 JSON 填充了数据库中的数据表，并添加了这些按钮，但问题是我不知道如何设置按钮（链接）以重定向到具有完整信息的 jsp 编辑页面。

JS代码

$(document).ready(function(){


var $table = $('#articleListTable');
if($table.length){

    $table.DataTable({
        lengthMenu : [[5,10,20,-1],['5', '10' , '20' , 'All']],
        pageLength : 10,
        ajax: {
            type:'GET',
            url: 'loadArticle',
            dataSrc: ''
        },
        columns: [

            { data :'codeArt'},
            { data :'rubrique.designation'},
            { data :'fournisseur.nomFournisseur'},
            { data :'refArt'},
            { data :'designationC'},
            { data :'quantite'},
            {   
                 defaultContent: '<a class="btn btn-xs btn-default" href="#" role="button"><span class="glyphicon glyphicon-file " aria-hidden="true"></span></a> <a  href="/article/modifier/1" class="btn btn-xs btn-success" role="button"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a> <a  href="javascript:void(0);" class="btn btn-xs btn-danger" role="button" data-toggle="modal" data-target="#modalArticle${article.getIdArticle()}"><span class="glyphicon glyphicon-trash " aria-hidden="true"></span>'   

            }                       
        ]       
    });
}

控制器代码

package com.gestion.mvc.controllers;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.gestion.mvc.entities.Article;
import com.gestion.mvc.entities.Fournisseur;
import com.gestion.mvc.entities.Rubrique;
import com.gestion.mvc.export.FileExporter;
import com.gestion.mvc.services.IArticleService;
import com.gestion.mvc.services.IFournisseurService;
import com.gestion.mvc.services.IRubriqueService;
import com.google.gson.Gson;

@Controller
@RequestMapping(value = "/article")
public class ArticleController {

    @Autowired
    private IArticleService articleService;

    @Autowired
    private IRubriqueService rubriqueService;

    @Autowired
    private IFournisseurService fournisseurService;

    @Autowired
    @Qualifier("articleExporter")
    private FileExporter exporter;


@RequestMapping(value="/loadArticle")
    @ResponseBody
    public  List<Article> JSONArticle () {
        return articleService.selectAll();
    }

@RequestMapping(value = "/modifier/{idArticle}")
    public String editArticle(Model model, @PathVariable Long idArticle) {
        if (idArticle != null) {
            Article article = articleService.getById(idArticle);
            List<Rubrique> listRubrique = rubriqueService.selectAll();
            List<Fournisseur> listFournisseur = fournisseurService.selectAll();
            if (listRubrique == null) {
                listRubrique = new ArrayList<Rubrique>();
            }
            if(listFournisseur == null) {
                listFournisseur = new ArrayList<Fournisseur();
            }
            model.addAttribute("listRub", listRubrique);
            model.addAttribute("listFrn", listFournisseur);
            if (article != null) {
                model.addAttribute("article", article);
            }
        }
        return "article/ajouterArticle";
    }

@RequestMapping(value = "/supprimer/{idArticle}")
    public String deleteArticle(Model model, @PathVariable Long idArticle) {
        if (idArticle != null) {
            Article article = articleService.getById(idArticle);
            if (article != null) {
                //TODO verification avant suppression
                articleService.remove(idArticle);
            }
        }
        return "redirect:/article/";
    }
}

这是显示我所做的图片。

自定义数据表

Answer 1

您可以使用 DataTables 中的createdRow选项。 做这样的事情，这使您可以访问该行中的字段

"createdRow": function (row, data, index) {
     // 'row' is the row, 'data' is an object with your fields for that row
     // The eq(n) is the cell where you want your button - it is zero-based
     $('td', row).eq(6).html('<button class="btn btn-primary edit" data-id="'+ data.id +'">Edit</button>');
}

然后创建一个单击该按钮时触发的函数

$table.on('click', '.edit', function() {
    // Get the id of the row from the data-id attribute of the button
    let id = $(this).attr('data-id');

    // Make a request for the data using this id
}

Answer 2

我认为您可以使用带有渲染选项的 ColumnDefs 来获得所需的内容。 最好的方法是使用 Editor，但您必须为此付费。 在这个例子中，我使用 'id' 数据来创建一个垃圾按钮：

"columnDefs": [
                 {  "targets": 0, "name": "id", visible: false, data: "id" },
                 {  "targets": 1, "width": "70%", "name": "nombre", visible: true, data: "nombre"},
                 {  "targets": 2, "width": "30%", "name": "acciones", visible: true, data: "id",
                     "render": 
                         function ( data, type, row, meta ) {
                            return '<div class="btn-toolbar" role="toolbar"><button type="button" class="btn btn-primary">Editar '+
                            data+
                            '</button><button onclick="eliminarSubcategoria('+
                            data+
                            ')" type="button" class="btn btn-danger"><i class="fa fa-trash"></i></button></div>';
                        }
                  }
                ],