Datatables添加新增数据和修改修改弹框，并与java后端实现数据交互

要实现Datatables添加新增数据和修改数据弹框，可以使用Datatables提供的Editor插件。以下是实现的步骤：

1. 引入Editor插件和相关依赖的CSS和JS文件。

2. 初始化Datatables表格

var table = $('#example').DataTable({
    ajax: 'data.json',
    columns: [
        { data: 'id' },
        { data: 'name' },
        { data: 'position' },
        { data: 'office' },
        { data: 'salary' }
    ]
});

3. 初始化Editor插件

var editor = new $.fn.dataTable.Editor( {
    ajax: 'example.php',
    table: '#example',
    fields: [
        { label: 'ID:', name: 'id' },
        { label: 'Name:', name: 'name' },
        { label: 'Position:', name: 'position' },
        { label: 'Office:', name: 'office' },
        { label: 'Salary:', name: 'salary' }
    ]
} );

4. 添加按钮触发弹框

$('#add').on('click', function () {
    editor.create( {
        title: 'Add new record',
        buttons: 'Add'
    } );
} );

5. 修改数据触发弹框

$('#example').on('click', 'tbody td:not(:first-child)', function (e) {
    editor.inline( this );
} );

6. 实现数据交互的Java后端代码

在Java后端，可以使用Spring MVC框架来处理前端提交的数据。对于新增数据，可以使用`@PostMapping`注解来处理POST请求，然后将提交的数据解析成Java对象，再将数据保存到数据库中。

对于修改数据，可以使用`@PutMapping`注解来处理PUT请求，然后根据提交的ID查询数据库中对应的数据，更新数据后保存到数据库中。

参考代码如下：

@PostMapping("/add")
@ResponseBody
public String addData(@RequestBody Data data) {
    // 保存数据到数据库
    return "success";
}

@PutMapping("/update")
@ResponseBody
public String updateData(@RequestBody Data data) {
    // 更新数据到数据库
    return "success";
}

以上是实现Datatables添加新增数据和修改数据弹框，并与Java后端实现数据交互的步骤。