###### tags:`Javascript套件`
# jQuery Datatables前端表格套件

[jQuery Datatables 文件](https://datatables.net/)

[jQuery Datatables教學參考-高級打字員的技術雲](https://dotblogs.com.tw/shadow/2018/04/03/013433)

#### 他有和BOOTSTRAP做樣式整合,可以另外引用css/js[jQuery Datatables BOOTSTRAP樣式](https://cdn.datatables.net/)

### 物件導向引入資料

<iframe height="470" style="width: 100%;" scrolling="no" title="DataTable-Object" src="https://codepen.io/corly74/embed/poNGqdE?height=470&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/corly74/pen/poNGqdE'>DataTable-Object</a> by peiyun
(<a href='https://codepen.io/corly74'>@corly74</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

//html

<div class="container mt-5 " style="margin-bottom: 100px ;">
    <div class="table-responsive">
    <table id="example2" class="table table-striped table-bordered display" width="100%">
    <thead>
        <tr>
            <th>NO</th>
            <th>Date</th>
            <th>Course name</th>
            <th>Lesson name</th>
            <th>Exercise name</th>
            <th>Correct%</th>
            <th>Scores</th>
            <th>Result</th>
            <th>Action</th>
        </tr>       
    </thead>
    <tbody id="example2">

    </tbody>
</table>
</div>
</div>

// js

let vdata = {"IELTSONLINE":[
    {   
        "id":"1",
        "NO":"",
        "Date":"2021-02-20 15:59:09",
        "Course name":"<a href='https://www.ieltstaipei.com/main/2'  target='_blank'>IELTS Intermediate</a>",
        "Lesson name":"Roots, Prefixes, Suffixes 5",
        "Exercise name":"Roots Prefixes Suffixes Exercise 5",
        "Correct%":"60%",
         "Scores":"6/10",
         "Result":"OPEN",
         "Action":"",
    },

    {   
        "id":"2",
        "NO":"",
        "Date":"2021-03-03 21:14:32",
        "Course name":"<a href='https://www.ieltstaipei.com/main/4'  target='_blank'>TOEFL Beginner</a>",
        "Lesson name":"Practice sets",
        "Exercise name":"Polysemy",
        "Correct%":"50%",
         "Scores":"10/20",
         "Result":"OPEN",
         "Action":"",
    },
    
    ]};
    
    
    $(document).ready(function () {
                
    $("#example2").DataTable( {
        data: vdata.IELTSONLINE,
        // paging: false,
        // info: false,
        // searching: false,
        columns: [
            { data: "NO",
              'render': function(data, type, row, meta)  {
                          return '<div class="d-flex justify-content-center pt-3"><input type="checkbox" name="checklist" value="' + row.name + '" /></div>'
                },
                'width': "1%",
             },
            { data: "Date" },
            { data: "Course name",
              "render": function(data, type, row, meta){
                   if(type === 'display'){
                       data = '<a href="' + data + '">' + data + '</a>'
                   }
                   
                   return data;
                }
            },
            { data: 'Lesson name'},
            { data: 'Exercise name'},
            { data: 'Correct%'},
            { data: 'Scores'},
            { data: 'Result'},
            { data: 'Action',
             'render': function(data, type, row, meta) {
                    return '<button class="btn btn-info btn-sm  mx-1 w-40" data-id=' + data + '><i class="fas fa-edit"></i></button>'
                    + '<button class="btn btn-danger btn-sm   w-40" id="deleteExercise" data-id=' + data.id + '><i class="fas fa-trash-alt"></i></button>'
                } ,
                'width': "12%",
                "targets": -1,
    
             },
        ]
    } ); 
    function deleteMovie(ID){
		params = {
            'action': 'delete',
            'id': ID
        }
        //verified ! 
        //Replaced post by get here just for testing
        // $.post('ExerciseServlet', params, function (data) {
        //     console.log(data);
        // });

          }

     $('body').on('click', '#deleteExercise', function(e){
        var id= $(this).attr("data-id");
        //alert(id);
        deleteMovie(id);
        //Optional delete Row after 
        $(this).parents("tr").remove();
    });

    
    } );