大佬教程收集整理的这篇文章主要介绍了在aspboilerplate中的jquery数据表中排序，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
只是在尝试 aspboilerplate。我在对列进行排序时遇到问题。我的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',type: Date,orderable: true,render: function (data) {
return moment(data).format('DD/MM/YYYY');
}
},{
targets: 6,data: 'enddate',render: function (data) {
return moment(data).format('DD/MM/YYYY');
}
},{
targets: 7,data: null,autoWIDth: false,render: (data,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>
我在 MVC 中使用 aspboilerplate。我已经在列定义目标 2 中设置了可排序的列：true。但似乎我无法按标题列单击进行排序。 我的意图是让用户能够按列标题单击进行排序。希望有人可以帮助我。
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）
以上是大佬教程为你收集整理的在aspboilerplate中的jquery数据表中排序全部内容，希望文章能够帮你解决在aspboilerplate中的jquery数据表中排序所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。