Spring Mvc Jquery Datatatables 始终为空

发布于 2025-01-10 01:38:10 字数 1841 浏览 0 评论 0原文

我正在使用 Spring Mvc 和 Jquery Datatables 来显示数据。问题在于,尽管控制器操作返回数据,但表始终为空。下面是代码:

控制器代码:

@RestController
@Transactional
@RequestMapping("/api/employees")
public class EmployeesRestController {
    
@Autowired
private employeesRepository repository;
   
@RequestMapping(value = "listEmplyees", method = RequestMethod.GET, produces = MimeTypeUtils.APPLICATION_JSON_VALUE)
    public ResponseEntity<List<Employer>> employeesList() {
        List<Employer> list = employeesRepository.listEmplyees();
        try {
            return new ResponseEntity<List<Employer>>(list, HttpStatus.OK);
        } catch (Exception e) {
            return new ResponseEntity<List<Employer>>(HttpStatus.BAD_REQUEST);
        }
    }
}

将数据加载到数据表中的Javascript代码:

<script type="text/javascript">


$(document).ready(function() {
    
    var table = $('#employeesTable').DataTable({
        pageLength : 2,
        ajax : {
            url : '/employeesmanagement/api/employees/listEmplyees',
            type: 'GET',
            dataSrc: '',            
            success: function (response) {                
                  
            },
            error: function (xhr, ajaxOptions, thrownError) {
                  alert(xhr.responseText);
            }
        },
        columns : [ {
                        title : 'id',
                        data : 'id'
                    }, {
                        title : 'name',
                        data : 'name'
                    } 
                 ]
    });
});

</script>

创建表的Html代码:

<table id="employeesTable" style="width: 100%"></table>

有人知道吗这个错误的来源? 谢谢

I am using Spring Mvc and Jquery Datatables to display the data. The problem is that the table is always empty despite the controller action returning data. Below is the code:

Controller code:

@RestController
@Transactional
@RequestMapping("/api/employees")
public class EmployeesRestController {
    
@Autowired
private employeesRepository repository;
   
@RequestMapping(value = "listEmplyees", method = RequestMethod.GET, produces = MimeTypeUtils.APPLICATION_JSON_VALUE)
    public ResponseEntity<List<Employer>> employeesList() {
        List<Employer> list = employeesRepository.listEmplyees();
        try {
            return new ResponseEntity<List<Employer>>(list, HttpStatus.OK);
        } catch (Exception e) {
            return new ResponseEntity<List<Employer>>(HttpStatus.BAD_REQUEST);
        }
    }
}

Javascript code to load data into Datatables:

<script type="text/javascript">


$(document).ready(function() {
    
    var table = $('#employeesTable').DataTable({
        pageLength : 2,
        ajax : {
            url : '/employeesmanagement/api/employees/listEmplyees',
            type: 'GET',
            dataSrc: '',            
            success: function (response) {                
                  
            },
            error: function (xhr, ajaxOptions, thrownError) {
                  alert(xhr.responseText);
            }
        },
        columns : [ {
                        title : 'id',
                        data : 'id'
                    }, {
                        title : 'name',
                        data : 'name'
                    } 
                 ]
    });
});

</script>

Html code to create the table:

<table id="employeesTable" style="width: 100%"></table>

Does anyone have an idea about the source of this error ?
Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

醉生梦死 2025-01-17 01:38:10

我为那些有同样问题的人找到了解决方案。事实上,API 返回的是一个 JSON 数组,而不是一个简单的数组,因此 API 返回结果的显示需要不同的处理。

下面是修改后加载数据的功能。

$(document).ready(function() {

    $.ajax({
        "url": "/employeesmanagement/api/employees/listEmplyees'",
        "type": "GET",
        "datatype": 'json',
        "success": function (data) {
            $('#employeesTable').DataTable({
                data: data,  
                columns: [
                    {
                        title : 'id',
                        data : 'id'
                    }, {
                        title : 'name',
                        data : 'name'
                    } 
                ]
            });
        }
    });
    
});

有关更多详细信息,请参阅以下链接: 如何加载 JSON 数组

I found the solution for those who have the same problem.Indeed the API returns an Array of JSON and not a simple Array, it is for this reason the display of the result returned by the API requires a different treatment.

Below is what the function of loading data looks like after modification.

$(document).ready(function() {

    $.ajax({
        "url": "/employeesmanagement/api/employees/listEmplyees'",
        "type": "GET",
        "datatype": 'json',
        "success": function (data) {
            $('#employeesTable').DataTable({
                data: data,  
                columns: [
                    {
                        title : 'id',
                        data : 'id'
                    }, {
                        title : 'name',
                        data : 'name'
                    } 
                ]
            });
        }
    });
    
});

For more details see the following link: How to load an array of JSON

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文