Блог

просто опробую стандартную форму.У меня проблема с сортировкой столбцов. Мои jquery, как показано ниже

 
(function ($) 
{
    var _objService = abp.services.app.project,
        l = abp.localization.getSource('abpori'),
        _$modal = $('#ProjectCreateModal'),
        _$form = _$modal.find('form'),
        _$table = $('#ProjectsTable'); 
         var _$ProjectsTable = _$table.DataTable({ 
        paging: true,
        serverSide: true,  
        ajax: function (data, callback, settings) {
            var filter = $('#ProjectSearchForm').serializeFormToObject(true);
            filter.maxResultCount = data.length;
            filter.skipCount = data.start;

            abp.ui.setBusy(_$table);
            _objService.getAll(filter).done(function (result) {
                callback({
                    sortable: true,
                    recordsTotal: result.totalCount,
                    recordsFiltered: result.totalCount,
                    data: result.items
                });
            }).always(function () {
                abp.ui.clearBusy(_$table);
            });
        },
        buttons: [
            {
                name: 'refresh',
                text: '<i class="fas fa-redo-alt"></i>',
                action: () => _$ProjectsTable.draw(false)
            }
        ],
        responsive: {
            details: {
                type: 'column' 
            }
        },
        columnDefs: [

            {
                targets: 0,
                className: 'control',
                defaultContent: '',
            }, 
            { 
                targets: 1,
                data: 'id',
                sortable: false,
                render: function (data, type, row, meta) {
                    return meta.row   meta.settings._iDisplayStart   1;
                }
            },

            {
                targets: 2,
                data: 'name',
                sortable: true 
            },
            {
                targets: 3,
                data: 'name_short',
                sortable: false//,
                 

            },
            {
                targets: 4,
                data: 'customer_name',
                sortable: false 
                
             },
            {
                targets: 5,
                data: 'startdate',
                sortable: false,
                type: Date,
                orderable: true,
                render: function (data) { 
                    return moment(data).format('DD/MM/YYYY');
                }
                 
            },
            {
                targets: 6,
                data: 'enddate',
                sortable: false,
                render: function (data) { 
                    return moment(data).format('DD/MM/YYYY');
                }
             
            },
            {
                targets: 7,
                data: null,
                sortable: false,
                autoWidth: false,
                defaultContent: '',
                render: (data, type, row, meta) => {
                    return [
                        `   <button type="button" class="btn btn-sm bg-secondary edit-project" data-project-id="${row.id}" data-toggle="modal" data-target="#ProjectEditModal">`,
                        `       <i class="fas fa-pencil-alt"></i> ${l('Edit')}`,
                        '   </button>',
                        `   <button type="button" class="btn btn-sm bg-danger delete-project" data-project-id="${row.id}" data-user-name="${row.name}">`,
                        `       <i class="fas fa-trash"></i> ${l('Delete')}`,
                        '   </button>'
                    ].join('');
                }
            }
             
        ]

      
    });
    
  

    _$form.find('.save-button').on('click', (e) => {
        e.preventDefault();

        if (!_$form.valid()) {
            return;
        }

        var objProject = _$form.serializeFormToObject();
       

        abp.ui.setBusy(_$modal);
        _objService.create(objProject).done(function () {
            _$modal.modal('hide');
            _$form[0].reset();
            abp.notify.info(l('SavedSuccessfully'));
            _$ProjectsTable.ajax.reload();
        }).always(function () {
            abp.ui.clearBusy(_$modal);
        });
    });

    $(document).on('click', '.delete-project', function () {
        var projId = $(this).attr("data-project-id");
        var projName = $(this).attr('data-project-name');

        deleteProject(projId, projName);
    });

    function deleteProject(projId, projName) {
        abp.message.confirm(
            abp.utils.formatString(
                l('AreYouSureWantToDelete'),
                projName),
            null,
            (isConfirmed) => {
                if (isConfirmed) {
                    _objService.delete({
                        id: projId
                    }).done(() => {
                        abp.notify.info(l('SuccessfullyDeleted'));
                        _$ProjectsTable.ajax.reload();
                    });
                }
            }
        );
    }

    $(document).on('click', '.edit-project', function (e) {
        var projectId = $(this).attr("data-project-id");

        e.preventDefault();
        abp.ajax({
            url: abp.appPath   'Projects/EditModal?Id='   projectId,
            type: 'POST',
            dataType: 'html',
            success: function (content) {
                $('#ProjectEditModal div.modal-content').html(content);
            },
            error: function (e) { }
        });
    });

    $(document).on('click', 'a[data-target="#ProjectCreateModal"]', (e) => {
        $('.nav-tabs a[href="#project-details"]').tab('show')
    });

   
    abp.event.on('project.edited', (data) => {
        _$ProjectsTable.ajax.reload();
    });
    _$modal.on('shown.bs.modal', () => {
        _$modal.find('input:not([type=hidden]):first').focus();
    }).on('hidden.bs.modal', () => {
        _$form.clearForm();
    });
    //
 
    //
    $('.btn-search').on('click', (e) => {
        _$ProjectsTable.ajax.reload();
    });

    $('.txt-search').on('keypress', (e) => {
        if (e.which === 13) {
            _$ProjectsTable.ajax.reload();
            return false;
        }
    });
 
})(jQuery);
 

Мои chtml, как показано ниже

 @using abpori.Web.Startup
@model abpori.Web.Models.Projects.IndexViewModel
@{
   ViewBag.Title = L("ProjectList");
   ViewBag.CurrentPageName = PageNames.ProjectList;
   ViewBag.ActiveMenu = "ProjectList"; //Matches with the menu name in SimpleTaskAppNavigationProvider to highlight the menu item
}

@section scripts
{

   <environment names="Development"> 
       <script src="~/view-resources/Views/Projects/Index.js" asp-append-version="true"></script> 
   </environment>

   <environment names="Staging,Production">
       <script src="~/view-resources/Views/Projects/Index.min.js" asp-append-version="true"></script>
   </environment>


}


<section class="content-header">
   <div class="container-fluid">
       <div class="row">
           <div class="col-sm-6">
               <h1>@L("ProjectList")</h1>
           </div>
           <div class="col-sm-6">
               <a href="javascript:;" data-toggle="modal" data-target="#ProjectCreateModal" class="btn bg-blue float-sm-right">
                   <i class="fa fa-plus-square"></i>
                   @L("Create")
               </a>
           </div>
       </div>
   </div>
</section>
<section class="content">
   <div class="container-fluid">
       <div class="row">
           <div class="col-12">
               <div class="card">
                   <div class="card-header">
                       <div class="row">
                           <div class="col-md-6">
                               <!--Use for bulk actions-->
                           </div>
                           <div class="col-md-6">
                               @await Html.PartialAsync("~/Views/Projects/Index.AdvancedSearch.cshtml")
                           </div>
                       </div>
                   </div>
                   <div class="card-body">
                       <div class="table-responsive">
                           <table id="ProjectsTable" class="table table-striped table-bordered">
                               <thead>
                                   <tr>
                                       <th></th>
                                       <th></th>
                                       <th >Project</th>
                                       <th >Project Code</th>
                                       <th  >Customer Name</th>
                                       <th>Date Start</th>
                                       <th>Date End</th>
                                       <th style="width: 150px">@L("Actions")</th>
                                   </tr>
                               </thead>
                               <tbody></tbody>
                           </table>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>
</section>
 
 

i am using aspboilerplate with MVC. I already set the column sortable: true in column definition target 2.But it seems like i cannot sort by header column click.
My intension is for user to have ability to sort by column header click. Hope someone could assist me .