jquery - arrary in Datatable make customise in array and display coluns according new coloums

Question

while using Data table display dynamic data takes array as input with coustomize filed in array.

标签： jqueryhtmlcssajax

Answer 1

<table>为分配为数据表的元素提供任何特定类

JS

var BindDatatable = function (data) {
        table = $('.datatable').DataTable({
            retrieve: true,
            data: data,
            columns: [
                { data: 'EmployeeID' },
                { data: 'EmployeeName' },
                { data: 'DOB', type: 'date-dd-mmm-yyyy', targets: 0, width: '100px' },
                { data: 'Salary' },
                { data: 'DepartmentName' },
                { data: 'CountryName' },
                { data: 'StateName' },
                { data: 'CityName' },
                {
                    data: null,
                    render: function (data, type, row) {
                        var html = "";
                        html += '<button class="btn btn-primary" data-viewtype="' + data.EmployeeID + '" id="' + data.EmployeeID + '" title="View"><span class="fa fa-user"></span></button>&nbsp';
                        html += '<button class="btn btn-success" data-edittype="' + data.EmployeeID + '" id="' + data.EmployeeID + '" title="Edit"><span class="fa fa-pencil"></span></button>&nbsp';
                        html += '<button class="btn btn-danger" data-deletetype="' + data.EmployeeID + '" id="' + data.EmployeeID + '" title="Delete"><span class="fa fa-trash"></span></button>';
                        return html;
                    }
                }
            ],
        });
    };

HTML

    <table id="table_id" class="datatable">
        <thead>
            <tr>
                <th>EmployeeID</th>
                <th>EmployeeName</th>
                <th>DOB</th>
                <th>Salary</th>
                <th>Department</th>
                <th>Country</th>
                <th>State</th>
                <th>City</th>
                <th>Action</th>
            </tr>
        </thead>
    </table>