datatable of jquery's table111.page(1).draw(true) is not working

Question

User2102072086 posted

hi,

    it works in first case but not in second , pls tel me why

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
</tbody>
                                    </table>
// then in js file
 var table12 = $('#example').DataTable();
   table12.page(1).draw(true);  // works
// but in below case it does not
 <table id="tblReport1" class="display" style="width:100%"><thead></thead><tbody></tbody></table>

// in js file

    var dd = [
        {
            "name": "Tiger Nixon",
            "position": "System Architect",
            "salary": "$3,120"
           
        }
    ];
    var table111 = $('#tblReport1').dataTable({
        "data": dd
        ,
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data":"salary"}
        ]
    });
    table111.page(1).draw(true); // does not work

Answer 1

User-2054057000 posted

Check console for JS errors which you might be getting.

Answer 2

User-719153870 posted

Hi rajemessage,

I don't think it's the draw() method that caused this issue.

In the "columns" of the dataTable(), the value of "data" does no match the field name in dd.

Please refer to below JS code and see if it works for you.

            var dd = [
                {
                    "name": "Tiger Nixon",
                    "position": "System Architect",
                    "salary": "$3,120",
                    "start_date": "2011/04/25",
                    "office": "Edinburgh",
                    "extn": 5421
                }
            ];
            var table111 = $('#tblReport1').dataTable({
                "data": dd
                ,
                "columns": [
                    { "data": "name" },
                    { "data": "position" },
                    { "data": "salary" },
                    { "data": "start_date" },
                    { "data": "office" },
                    { "data": "extn" }
                ]
            });

In addition, seems you may have confused Data rendering and Javascript sourced data. In your case, i think the JS source data might be more suitable.

Or if i misunderstood anything, please correct me. Thanks!

Best Regard,

Yang Shen

Answer 3

User2102072086 posted

i have checked it is not working , is it working at your end?

Answer 4

User-719153870 posted

Hi rajemessage,

Yes, it's working at my end.

Would you please share screenshot of your current output and the latest code you are testing with?

Also, please press F12 to open the devtool and check if there's any error message in console.

Best regard,

Yang Shen

Answer 5

User2102072086 posted

well, there is some error message in the console,

but both examples  are on the same page. both are working(they bind the grid properly) but 

this line 

table111.page(1).draw(true)

only works in first case. not in the second case.

pls copy past my code in jsfiddle it is easy , so that u can test it is not working there also

please tel me how can upload or share image here.

Answer 6

User2102072086 posted

this is jsfiddle link pls check https://jsfiddle.net/ryadav/c4bzv187/

Answer 7

User-719153870 posted

Hi rajemessage,

table111.page(1).draw(true)

The first half of this line of code is used to set your datatable to page 2, please refer to page(), Please be aware that this method sets the page to be shown - it does not actually perform the re-display of the table. In order to have the newly set page shown use the draw() method, which can be called simply as a chained method of the page() method's returned object - for example table.page( 0 ).draw( false );.

I'm not sure how to understand the it does not work, is it that it's not showing 2nd page when page load? If so, please set draw(false) instead. If not, what is the result you are expecting?

About how to insert image, please check How to post a image at this panel?.

Best Regard,

Yang Shen