Dynamically construct jquery datatable with server side data

Question

Based on the parameter , i would like to load the database table data into jquery datatable for CRUD operation . Please suggest me how to construct the table header based on the parameter.

(class name /attributes or table/columns ) 
Employee -id,firstname,lastname,email
Sports  - id ,sportname,count
Tropy   - id ,result.

If the user select Employee from dropdown , i will pull the data from employee table and show it in datatable.

view Part given below

var table = $('#example').DataTable( {
        "sAjaxSource": "/restservice/employee",
        "sAjaxDataProp": "",
        "order": [[ 0, "asc" ]],
          "aoColumns": [
            { "mData": "id"},
            { "mData": "firstName"},
            { "mData": "lastName"},
            { "mData": "email"}
          ],
          "paging":false
        });

Given below is Controller

@org.springframework.web.bind.annotation.RestController
public class RestController {

     @RequestMapping(path="/restservice/employee", method=RequestMethod.GET)
        public List<Employee> getEmployees() 
        {

            List<Employee> employeesList = new ArrayList<Employee>();
            employeesList.add(new Employee(1,"khaja","sherif","[email protected]"));
            employeesList.add(new Employee(2,"bharathi","bar","[email protected]"));
            employeesList.add(new Employee(3,"arun ","arun","[email protected]"));
            employeesList.add(new Employee(4,"rajesh","bose","[email protected]"));
            return employeesList;
        }

Employee table contains 4 columns, so i have hardcoded 4 column in datatable. Since sports and trophy contains 3 and 2 column respectively , how to construct the table header in datatable ?

Bindrid · Accepted Answer · 2017-06-03 17:27:31Z

I am using terms expected for ver 1.10+. Some of yours is a bit older I think.

Not sure that I fully understand what you are trying to do but it sounds like you are displaying columns based on the data returned. try this:

    <script>
        $(document).ready(function () {
            $("#sel").on("change",
            function () {
                 setupTable($(this).val());
            })
        });
        function setupTable(selVal) {
            //Employee -id,firstname,lastname,email
            //Sports  - id ,sportname,count
            //Tropy   - id ,result.
            if ($.fn.DataTable.isDataTable('#example')) {
                $('#example').DataTable().destroy();
            }
            var cols = [{ 'data': 'id', 'title': 'ID' }];
            switch (selVal) {
                case "Employee":
                    cols.push({ 'data': 'firstname', 'title': 'First Name' });
                    cols.push({ 'data': 'lastname', 'title': 'Last Name' });
                    cols.push({ 'data': 'email', 'title': 'Email' });
                    break;
                case "Sports":
                    cols.push({ 'data': 'sportname', 'title': 'Sport Name' });
                    cols.push({ 'data': 'count', 'title': 'Count' });
                    break;

                case "Trophy":
                    cols.push({ 'data': 'result', 'title': 'Result' });
                    break;
                default:
                    alert("nothing selected");
                    break;
            }
            $("#example").html("");
            $("#example").DataTable({
                "columns": cols,
                "ajax": {url: "/restservice/" + selVal, dataSrc:""},
                "order": [[ 0, "asc" ]],
                "paging":false
            });
        }
    </script>

    <div>
        <select id="sel">
            <option value="0">Select Layout</option>
            <option value="Employee">id,firstname,lastname,email</option>
            <option value="Sports"> id ,sportname,count</option>
            <option value="Trophy">id ,result</option>
        </select>

</div>
    <div>
        <table id="example" class="display">
            <thead></thead>
            <tbody></tbody>
        </table>
    </div>

Collectives™ on Stack Overflow

Dynamically construct jquery datatable with server side data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related