Entering data when using the bootstrap data table

Asked 2 years ago, Updated 2 years ago, 130 views

This is a problem that does not include data values when using a data table in the bootstrap.

jsp script

var data2;
var StringData;
$(document).ready(function(){
        $.ajax({
            url:"MemSearchTable.ad",
            type:"post",
            success:function(data1){
                $("#h1").val(data1);
                data2 =$("#h1").val();

                console.log(data2);
                console.log(StringData);
            },
        });
        $('#myTable').DataTable({
            data : data2,
            columns: [
                {data:'memNum'},
                {data:'memId'},
                {data:'memName'},
                {data:'memGender'},
                {data:'memPhone'},
                {data:'nationCode'},
                {data:'memPoint'},
                {data:'memType'},
                {data:'memStatus'},
                {data:'enrollDate'},
                {data:'noShow'}
            ]
        });
});

#h1 is HTML input hidden. Data1 is normally imported by placing JSONObject in JSONarray in the servlet. Imported data sample.

data2

[
{"memNum":1,
"memStatus":"Y",
"memName":"ADMIN",
"noShow":null,
"memPhone":"01012340001",
"memType":"A","memGender":"M",
"memPoint":0,
"enrollDate":2019-08-29,
"memId":"admin"
,"nationCode":1}
]

I've received the price well, but I don't know why it doesn't fit. Please reply. Thank you.

jsp datatables bootstrap

2022-09-22 18:10

1 Answers

The reason why it's not going in... Because there's a proper way to get DataTables data to AJAX. Officially supported options. Once you've read the document carefully, you'll think that you should try again by fixing the source like this.

$('#myTable').DataTable({
    // This is important
    ajax: {
        url: 'MemSearchTable.ad',
        type: "POST", // Now that I see it, the servlet must request POST.
        dataSrc: ''
    },
    columns: [
        {data:'memNum'},
        {data:'memId'},
        {data:'memName'},
        {data:'memGender'},
        {data:'memPhone'},
        {data:'nationCode'},
        {data:'memPoint'},
        {data:'memType'},
        {data:'memStatus'},
        {data:'enrollDate'},
        {data:'noShow'}
    ]
});

This method no longer requires #h1.


2022-09-22 18:10

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.