使用ajax加载DataTable [英] Loading DataTable using ajax
本文介绍了使用ajax加载DataTable的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好，我正在使用Ajax Methode填充数据表，我已经测试了我的Web API，并且可以正常工作，但是我一直收到此消息表中没有可用的数据
Hello i'm using Ajax Methode to fill a DataTable i have tested my Web API and it's working correctly but i keep getting this message No data available in table
jQuery代码：
// DataTables
var table = $("#table").DataTable({
ajax: {
url: "/api/picklist/getpicklist",
dataSrc:"",
},
columns: [
{
data:"numero_picklist"
},
{
data:"PFIN"
}
]
});
HTML表格：
<table id="table" class="table table-bordered table-hover table-responsive table-striped">
<thead>
<tr>
<th>Numéro picklist</th>
</tr>
</thead>
</table>
Web API：
// GET /api/picklist
public IEnumerable<PicklistDto> GetPicklist()
{
return _context.Dimension_picklist.ToList().Select(Mapper.Map<Dimension_picklist,PicklistDto>);
}
Web API测试：
在此处输入图片描述
Web API Test : enter image description here
推荐答案
首先，您需要学习数据表的内容&它的参数。
在ajax上，将some参数发送给target方法以获取记录和过滤。我使用了包含参数的DTParameters。
First you need learn sractch of data table & its parameter. On the ajax its send the some parameter to target method to fetch record and filterning. i've used DTParameters which contail the param.
这是ActionMethod
Here is ActionMethod
[System.Web.Http.HttpPost]
public IHttpActionResult loadData(DTParameters param)
{
//Us IQuerable for server side processings -filterning and pagination
//i m just doing testing
var ListData = getList();
//take and skip record according to pagination
var takeData = ListData.Skip(param.Start).Take(param.Length).ToList();
// IF searching value is not null
if (param.Search.Value != null && param.Search.Value != "")
{
var sendData = takeData.Where(p => p.numero_picklist != null && p.numero_picklist.ToLower().Contains(param.Search.Value.ToLower())
|| p.PFIN != null && p.PFIN.ToLower().Contains(param.Search.Value.ToLower())).ToList();
DTResult<PicklistDto> result = new DTResult<PicklistDto>
{
draw = param.Draw,
data = sendData.ToList(),
recordsFiltered = ListData.Count(), // total number of record
recordsTotal = ListData.Count(), // total number of record
};
return Json(result);
}
else
{
var sendData = takeData;
DTResult<PicklistDto> result = new DTResult<PicklistDto>
{
draw = param.Draw,
data = sendData.ToList(),
recordsFiltered = ListData.Count(), // total number of record
recordsTotal = ListData.Count(), // total number of record
};
return Json(result);
}
}
index.chsml数据表脚本
index.chsml datatable script
<!doctype html>
<html>
<head>
<title>@ViewBag.Title - MVC Datatables App</title>
</head>
<body>
<div class="container">
<h3> Report</h3>
<table class="table table-striped" id="datatab">
<thead>
<tr>
<th>
numero_picklist
</th>
<th>
PFIN
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/dataTables.scroller.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.11.3.min.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<script>
//initiate dataTables plugin
$('#datatab')
//.wrap("<div class='dataTables_borderWrap' />") //if you are applying horizontal scrolling (sScrollX)
.DataTable({
"bProcessing": true,
"bServerSide": true,
//"serverSide": true,
"ajax": {
"type": "POST",
"url":'/DataTable/loadData',
"contentType":'application/json; charset=utf-8',
'data': function (data) {
//console.log(data);
return data = JSON.stringify(data);
},
//dataSrc: '',
},
"paging": true,
//"deferRender": true,
"columns": [
{ "data": "numero_picklist" },
{ "data": "PFIN" },
],
"order": [0, "asc"],
bAutoWidth: false,
});
</script>
创建模式类 DatatablesViewModel，将其保存，导入到控制器中。
Create the modal class 'DatatablesViewModel' save it , import to your controller.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
///This view model class has been referred from example created by Marien Monnier at Soft.it. All credits to Marien for this class
namespace MVCDatatableApp.Models
{
/// <summary>
/// A full result, as understood by jQuery DataTables.
/// </summary>
/// <typeparam name="T">The data type of each row.</typeparam>
public class DTResult<T>
{
/// <summary>
/// The draw counter that this object is a response to - from the draw parameter sent as part of the data request.
/// Note that it is strongly recommended for security reasons that you cast this parameter to an integer, rather than simply echoing back to the client what it sent in the draw parameter, in order to prevent Cross Site Scripting (XSS) attacks.
/// </summary>
public int draw { get; set; }
/// <summary>
/// Total records, before filtering (i.e. the total number of records in the database)
/// </summary>
public int recordsTotal { get; set; }
/// <summary>
/// Total records, after filtering (i.e. the total number of records after filtering has been applied - not just the number of records being returned for this page of data).
/// </summary>
public int recordsFiltered { get; set; }
/// <summary>
/// The data to be displayed in the table.
/// This is an array of data source objects, one for each row, which will be used by DataTables.
/// Note that this parameter's name can be changed using the ajaxDT option's dataSrc property.
/// </summary>
public List<T> data { get; set; }
}
/// <summary>
/// The additional columns that you can send to jQuery DataTables for automatic processing.
/// </summary>
public abstract class DTRow
{
/// <summary>
/// Set the ID property of the dt-tag tr node to this value
/// </summary>
public virtual string DT_RowId
{
get { return null; }
}
/// <summary>
/// Add this class to the dt-tag tr node
/// </summary>
public virtual string DT_RowClass
{
get { return null; }
}
/// <summary>
/// Add this data property to the row's dt-tag tr node allowing abstract data to be added to the node, using the HTML5 data-* attributes.
/// This uses the jQuery data() method to set the data, which can also then be used for later retrieval (for example on a click event).
/// </summary>
public virtual object DT_RowData
{
get { return null; }
}
}
/// <summary>
/// The parameters sent by jQuery DataTables in AJAX queries.
/// </summary>
public class DTParameters
{
/// <summary>
/// Draw counter.
/// This is used by DataTables to ensure that the Ajax returns from server-side processing requests are drawn in sequence by DataTables (Ajax requests are asynchronous and thus can return out of sequence).
/// This is used as part of the draw return parameter (see below).
/// </summary>
public int Draw { get; set; }
/// <summary>
/// An array defining all columns in the table.
/// </summary>
public DTColumn[] Columns { get; set; }
/// <summary>
/// An array defining how many columns are being ordering upon - i.e. if the array length is 1, then a single column sort is being performed, otherwise a multi-column sort is being performed.
/// </summary>
public DTOrder[] Order { get; set; }
/// <summary>
/// Paging first record indicator.
/// This is the start point in the current data set (0 index based - i.e. 0 is the first record).
/// </summary>
public int Start { get; set; }
/// <summary>
/// Number of records that the table can display in the current draw.
/// It is expected that the number of records returned will be equal to this number, unless the server has fewer records to return.
/// Note that this can be -1 to indicate that all records should be returned (although that negates any benefits of server-side processing!)
/// </summary>
public int Length { get; set; }
/// <summary>
/// Global search value. To be applied to all columns which have searchable as true.
/// </summary>
public DTSearch Search { get; set; }
/// <summary>
/// Custom column that is used to further sort on the first Order column.
/// </summary>
public string SortOrder
{
get
{
return Columns != null && Order != null && Order.Length > 0
? (Columns[Order[0].Column].Data + (Order[0].Dir == DTOrderDir.DESC ? " " + Order[0].Dir : string.Empty))
: null;
}
}
}
/// <summary>
/// A jQuery DataTables column.
/// </summary>
public class DTColumn
{
/// <summary>
/// Column's data source, as defined by columns.data.
/// </summary>
public string Data { get; set; }
/// <summary>
/// Column's name, as defined by columns.name.
/// </summary>
public string Name { get; set; }
/// <summary>
/// Flag to indicate if this column is searchable (true) or not (false). This is controlled by columns.searchable.
/// </summary>
public bool Searchable { get; set; }
/// <summary>
/// Flag to indicate if this column is orderable (true) or not (false). This is controlled by columns.orderable.
/// </summary>
public bool Orderable { get; set; }
/// <summary>
/// Specific search value.
/// </summary>
public DTSearch Search { get; set; }
}
/// <summary>
/// An order, as sent by jQuery DataTables when doing AJAX queries.
/// </summary>
public class DTOrder
{
/// <summary>
/// Column to which ordering should be applied.
/// This is an index reference to the columns array of information that is also submitted to the server.
/// </summary>
public int Column { get; set; }
/// <summary>
/// Ordering direction for this column.
/// It will be dt-string asc or dt-string desc to indicate ascending ordering or descending ordering, respectively.
/// </summary>
public DTOrderDir Dir { get; set; }
}
/// <summary>
/// Sort orders of jQuery DataTables.
/// </summary>
public enum DTOrderDir
{
ASC,
DESC
}
/// <summary>
/// A search, as sent by jQuery DataTables when doing AJAX queries.
/// </summary>
public class DTSearch
{
/// <summary>
/// Global search value. To be applied to all columns which have searchable as true.
/// </summary>
public string Value { get; set; }
/// <summary>
/// true if the global filter should be treated as a regular expression for advanced searching, false otherwise.
/// Note that normally server-side processing scripts will not perform regular expression searching for performance reasons on large data sets, but it is technically possible and at the discretion of your script.
/// </summary>
public bool Regex { get; set; }
}
}
有关更多详细信息，您可以访问此网站访问此
For more detail you can visit this site visit this
这篇关于使用ajax加载DataTable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
