我的Ajax请求只发送一次

Question

I have an ajax request for getting the purchased list of a user. I thought it was perfectly working because it returns the data that I need. But when I click the other user it seems the ajax request only send a request once. Becuase the data is the same, and when I look at the network tool of chrome, there is no another request was send.

This is my current Ajax request.

var purchased_list;
// $('#student_profile_purchased_item_list_tab').click(function(){
    function createTablePurchasedList(id){
        console.log("Start, student:"+id);
            purchased_list= $('#purchased_item_list_table').DataTable({
                // "processing": true,
                // "paging":   false,
                // "ordering": true,
                "ajax": {
                    url:'{{ route("student_item_list") }}?student_id='+id,
                    cache: true,
                    dataSrc: "",
                },
                columnDefs: [
                    {
                        className: "dt-center",
                        targets: [0],
                    },
                ],
                "columns": [
                    {
                        data: "date_purchased"
                    },
                    {
                        data: "product_status_id",
                        render: function(data, type, row){
                            switch(data){
                                case 2:
                                    return 'Purchased';
                                case 3:
                                    return '<p style="color:red;">Consumed</p>';
                                case 6:
                                    return '<p style="color:green;">Transferred</p>';
                            }
                        }
                    },
                    {
                        data: "name",
                        render: function(data, type, row){
                            return data;
                        }
                    },
                ]
            });
        console.log("End, student:"+id);
    }
// });

Tab

<li><a href="#student_profile_purchased_item_list" data-toggle="tab" id="student_profile_purchased_item_list_tab">Purchased Item List</a></li>

Datatable

<div class="tab-pane fade in" id="student_profile_purchased_item_list">
    <div style="position:relative;">
        <div class="other_content_header">
            Item List
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <table width="100%" class="responsive table table-striped table-bordered table-hover purchase-item-table" id="purchased_item_list_table" style="font-size:12px; text-align:center;">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Item Status</th>
                        <th>Product Name</th>
                        {{-- <th>Quantity</th> --}}
                        {{-- <th> </th> --}}
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

every time I click a user the console.log result changes, At first I thought the ID is not changing when I click another user. But when I do the console log the result changes.

Hope someone can help me solve my problem.