<div class="">
    <div class="document-list">
        <table id="taskChatLogGrid" data-url="@Url.Action("TaskChatLogList", "Task")" class="list-table">
            <thead>
                <tr>
                    <th width="5%" class="dt-head-center">@Loc.CompletedShort</th>
                    <th width="15%">@Loc.Task</th>
                    <th width="15%">@Loc.Message</th>
                    <th width="15%">@Loc.ConnectionKey</th>
                    <th width="10%">@Loc.TheMatter</th>
                    <th width="10%">@Loc.User</th>
                    <th width="10%">@Loc.CreationTime</th>
                    <th width="10%">@Loc.Status</th>
                    <th width="10%">@Loc.BusinessProcess</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<script>
    $(document).ready(function () {
        $dataTable = $('#taskChatLogGrid');
        $dataTable.DataTable({
            ajax: {
                url: $dataTable.attr('data-url'),
                data: function (d) {
                    d.DocumentQid = $("#Document_Id").val() ? $("#Document_Id").val() : $("#Id").val();
                    d.TaskQid = $("#Id").val();
                }
            },
            order: [[1, 'desc']],
            columns: [
                { data: "Completed", name: "AbCompleted", render: $.fn.dataTable.render.toggle(true, true), className: 'dt-body-center' },
                { data: "Task", name: "AcTask", orderable: false, filtertype: "text" },
                { data: "Message", name: "AcMessage", orderable: false, filtertype: "text" },
                { data: "AcKeyView", name: "AcKey", orderable: false, filtertype: "text" },
                { data: "Subject", name: "AcSubject", orderable: false, filtertype: "text" },
                { data: "User", name: "AcUser", orderable: false, filtertype: "text" },
                { data: "TimeIns", name: "AdTimeIns", orderable: false, filtertype: "dateTime" },
                { data: "Status", name: "AcStatus", orderable: false, filtertype: "text" },
                { data: "WorkflowName", name: "AcWorkflowName", orderable: false, filtertype: "text" }
            ]
        });
    });
</script>