I am getting an error
Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
at Ha (jquery.dataTables.min.js:24)
from my code shown below. I don't see any fault in my code. when iterating dictionary values it is throwing the error. If I comment foreach loop, the datatable is loading properly with headers. What could be the problem?
<table class="dataTableWrapper" id="dynamic_table_container" data-target="#categories">
<thead>
<tr>
<th>COUNTRY</th>
<th>CATEGORY</th>
</tr>
</thead>
<tbody>
#foreach (var country in countrieslstAndPriceGroup)
{
<tr>
<td>#country.Key</td>
<td>#country.Value</td>
</tr>
}
</tbody>
</table>
<script language="javascript">
$(function() {
var t = $('#dynamic_table_container').DataTable({
"pageLength": 25,
"columnDefs": [
{ // set default column settings
"orderable": false,
"targets": [1, 2, 4]
}
],
"bFilter": false
});
});
</script>
Related
I am using DataTable library in MVC, but it doesn't work
this is the view Part
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Id</th>
<th>Phone</th>
<th>FirstName</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Phone</th>
<th>FirstName</th>
<th>LastName</th>
</tr>
</tfoot>
</table>
<script type="text/javascript">
//$(document).ready(function () {
// $('#example').DataTable();
//})
$(document).ready(function () {
GetEmployeeRecord();
})
var GetEmployeeRecord = function () {
$.ajax({
type: "Get",
url: "/BasicInfo/GetCustomers",
success: function (response) {
alert("success");
BindDataTable(response);
},
error: function () {
alert("error");
}
})
}
var BindDataTable = function (response) {
$("#example").DataTable({
"aaData": response,
"aoColumns": [
{ "mData": "Id" },
{ "mData": "Phone" },
{ "mData": "FirstName" },
{ "mData": "lastName" }
]
});
}
and this is Controller Part
public JsonResult GetCustomers()
{
SalonEntities db = new SalonEntities();
List<Customer> CustomerList = db.Customers.OrderByDescending(a => a.ID).ToList();
return Json(CustomerList , JsonRequestBehavior.AllowGet);
}
although the CustomerList in controller is loaded but it returns to the view it enters the error section of jquery
what could be the problram
The ajax call to your controller failed. To debug this, you can do two things:
Alert the error
Remove the (dobule quote) " to alert the actual error.
error: function () {
alert(error);
}
You will most probably be able to see it in developer tools in your console.
Check the network tab
In your network tab, you'll see the error (4XX, 5XX) or something like that with some extra information (if you are lucky).
If no more information is there and you have an error 500, you need to check the exception in your backend code.
I am trying to get the sum of a column in a datatable, where the origin of the data is from a different table than the API used by the datatable.
The datatable is using data from a 'Purchases' table, that is related to the 'Handsets' table, in which the 'SalesPoints' data exists, as you can see from the snippet below. I want to get the sum of the SalesPoints column.
<script>
$(document).ready(function () {
var table = $("#purchases").DataTable({
rowReorder: {
selector: 'td:nth-child(2)'
},
ajax: {
url: "/api/purchases",
dataSrc: ""
},
columns: [
{
data: "customer.name"
},
{
data: "handset.name"
},
{
data: "handset.salesPoints"
},
{
data: "datePurchased"
}
],
responsive: true
});
});
To get this sum, I have included the following code in my Controller:
private void ComputeBySalesSalesID(DataSet dataSet)
{
// Presumes a DataTable named "purchases" that has a column named "handset.salesPoints."
DataTable table;
table = dataSet.Tables["purchases"];
// Declare an object variable.
object sumObject;
sumObject = table.Compute("SUM([handset.salesPoints])", "");
ViewBag.TotalValue = sumObject.ToString();
}
To display this sum, I have included '#Html.Label((String)ViewBag.TotalValue)' in my view; when I run the program, this label throws me an exception, saying it cannot be null.
I would seriously appreciate any insight on this as it is preventing me from progressing with a project that is due quite soon. Thanks!
EDIT: View code
#model IEnumerable<SmashingTargets.Models.Purchase>
#{
ViewBag.Title = "List";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Sales</h2>
<p>
#Html.ActionLink("My Profile", "Profiles", "Sales", null, new { #class =
"btn btn-primary" })
</p>
#*Display Sum total*#
<div class="form-group">
#Html.Label((String)ViewBag.TotalValue)
</div>
<table id="purchases" class="table table-striped table-bordered table-hover
table-responsive">
<thead>
<tr>
<th>Customer</th>
<th>Handset</th>
<th>Points Earned</th>
<th>Date Purchased</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I am trying to setup server side pagination with datatable.
I have used the same following technique in asp.net mvc but somehow its not working with asp.net (webforms).
Following is my .aspx page:
<table class="table table-striped table-bordered table-hover dt-responsive" id="tbl-1" cellspacing="0" width="100%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
var oTable = $('#tbl-1').DataTable({
"aoColumnDefs": [
],
"serverSide": true,
"ajax": {
"type": "POST",
"url": '/mypage.aspx/myMethod',
"contentType": 'application/json; charset=utf-8',
'data': function (data) {
console.log(data);
return data = JSON.stringify(data);
},
'async': true
},
"scrollY": 300,
"processing": true,
"paging": true,
"deferRender": true,
"columns": [
{ "data": "Column1" },
{ "data": "Column2" },
{ "data": "Column3" }
]
});
</script>
and following is my c# webmothod:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet=false)]
public static List<myClass> myMethod(DTVM param)
{
List<myClass> listmyClass = new List<myClass>();
return listmyClass;
}
but somehow i am getting following error:
Invalid web service call, missing value for parameter: 'param'.
Please guide me what i am doing wrong.
Thanx.
I´m working on asp.net WebApi with Angular doing DataTable.
View:
<table class="table table-striped table-hover table-bordered dt-bootstrap no-footer" id="tabla_catalogos" role="grid" aria-describedby="sample_editable_1_info">
<thead>
<tr>
<th class="hidden"></th>
<th style="width: 200px;"> Codigo </th>
<th> Nombre </th>
</tr>
</thead>
<tbody></tbody>
</table>
Angular control:
$scope.filtro = function (selected) {
apiService.get("../../api/Catalogo/GetCatalogoRegistro/" + selected.ID);
}
Here I get values (I recieve 5 values) but for dataTable I only need Codigo and Nombre, If I test it separately I recieve parameters without problems.
So now I use it into url parameter of datatable
Data Table:
$('#tabla_catalogos').DataTable({
searching: true,
dom: 'ftpB',
buttons: [
'excelHtml5', 'csv', 'print'
],
paging: true,
select: {
style: 'single'
},
info: false,
ordering: true,
"processing": true,
ajax: {
method: 'GET',
url: $scope.filtro = function (selected) {
apiService.get("../../api/Catalogo/GetCatalogoRegistro/" + selected.ID);
},
dataSrc: '',
beforeSend: function (request) {
request.setRequestHeader("Version", $scope.usuario.Version);
request.setRequestHeader("Origen", 'Web');
}
},
columns: [
{ data: 'Codigo' },
{ data: 'Nombre' },
],
pageLength: 10
, language: {
"emptyTable": "No se encontraron registros",
"zeroRecords": "No encontraron coincidencias",
"search": "Buscar: "
}
});
But in Chrome console, I get this error:
NOT FOUND 404:
http://localhost:55720/api/Catalogo/GetCatalogoRegistro/%22%20+%20selected.ID);%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D?_=1492444754842
I am a beginner in jQuery dataTable, last day I implement dataTable 1.10 in my website.
I try to popup the id field in alert window in the selected row.
The first page is works correctly but when I go to the second page I click the
row id is 11. but popup is showing the id of the clicked row is 1.
All pages are showing this error, it's only working correctly in first page.
Please see my code below.
Script
$(document).ready(function () {
//$("#tblProvider").dataTable().destroy();
$("#tblProvider").dataTable({
bProcessing: true,
bPaginate: true,
bLengthChange: false,
bSort: true,
sAjaxSource: '#Url.Action("JsonGetAllTariffPosition", "Admin")',
aoColumns: [
{ sTitle: "Id", bVisible: true, bSortable: false },
{ sTitle: "Number", bSortable: false },
{
sTitle: "Action",
bSortable: false,
mRender: function (o) { return '<i class="ui-tooltip fa fa-pencil" data-toggle="modal" style="font-size: 22px;" data-original-title="Edit"></i><i class="ui-tooltip fa fa-trash-o" style="font-size: 22px;" data-original-title="Delete"></i>'; }
}
],
});
$("#tblProvider").on('click', 'tr td i[class="ui-tooltip fa fa-pencil"]', function () {
var row_index = $(this).closest('td').parent()[0].sectionRowIndex //you need to determine this how ever you like
var table = $('#tblProvider').DataTable()
var column_data = table.row(row_index).data()[0];
alert(column_data);
});
});
Html
<table id="tblProvider"
class="table table-striped table-bordered table-hover table-highlight table-checkable"
data-search="true"
data-paginate="true">
<thead>
<tr>
<th>Id</th>
<th>Tariff Position</th>
#*<th>General Tax</th>
<th>Consumption Tax</th>*#
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Replace the code in your click handler with this
var node = $(this).closest('tr')
var table = $('#tblProvider').DataTable()
var column_data = table.row(node).data()[0];