I'm trying to achieve SPA with help angular route provide for that i'm using ng-view for injecting the views. in one page i'ave a jquery datatable where i need to get the index of row selected by using jquery. but this is not happing inside ng-view. i tried by using directives also but no luck.
can someone help me in this
Home.html
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
Get Selected Rows
Controller.Js:
app.controller("HomeController", function ($scope, $http,$window) {
$('#example').DataTable({
"ajax": {
"url": "test.json",
"dataSrc": ""
},
"columns": [
{ "data": null },
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
],
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0
}],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[1, 'asc']]
});
$scope.$broadcast('dataloaded');
$scope.Customers = $("example").DataTable().data;
console.log("Result: ", $scope.Customers.length);
$scope.GetDetails = function () {
var table = $("example").DataTable();
var rowid = table.row(this).index();
alert(rowid);
};
$scope.GetRowID = function () {
$('#example tbody').on('click', 'tr', function () {
console.log("inside");
debugger;
var table = $("#example").DataTable();
alert('Row index: ' + table.row(this).index());
});
};
$scope.init();
Related
$(document).ready(function() {
var table = $('#example').DataTable({
"columns": [
{ "data": "id" },
{ "data": "itemID" },
{ "data": "imagePath" },
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "icon" },
{ "data": "reporter" },
{ "data": "title" },
{ "data": "dateUploaded" },
{ "data": "dateReported" },
{ "data": "reportedReason" },
{ "data": "description" },
{ "data": "problem" },
{ "data": "numReports" },
{ "data": "deleteImage" }
],
"columnDefs":
[
{
"targets": 0,
"visible": false
},
{
"targets": 1,
"visible": false
},
{
"targets": 2,
"visible": false
},
{
"data": null,
"defaultContent": "<button>Delete</button>",
"targets": -1
}
]
});
]);
Note: The final td in the tbody has been left blank.
<table id="example" class="sortable table table-bordered table-striped table-hover">
<thead>
<?php
foreach($report_flag_info as $flag_info){
?>
<tr>
<th>ID</th>
<th>ItemID</th>
<th>Image Path</th>
<th>Image</th>
<th>Reporter</th>
<th>Title</th>
<th>Image</th>
<th>Uploaded</th>
<th>Reported</th>
<th>Reason</th>
<th>Description</th>
<th>Problem</th>
<th>No. Times Reported</th>
<th>Delete Image</th> // I want the button to be in this column
</tr>
</thead>
<tbody>
<?php
foreach($report as $flag_info){
?>
<tr>
<td></td>...
</tr>
<?php } ?>
</tbody>
</table>
The table in the html is populated by using a foreach loop to load the data from the server to the table. I tried the suggestion in the following links to
solve the issue.
https://datatables.net/reference/option/columns.defaultContent
How do I add button on each row in datatable?
https://datatables.net/examples/ajax/null_data_source.html
How add more then one button in each row in JQuery datatables and how to apply event on them
The fact that conumDefs Option was applied before columns.data, meant that columns.data Option config { "data": "deleteImage" }
is overwriting the columnDefs option that is building the button. Changing { "data": "deleteImage" } to { "data": null } prevented
the button being overwritten and hence, solved the problem.
I've this https://jsfiddle.net/cubmf71z/44/ ..
I want to reload function data_list with new parameter in ajax in same function data_list when i'm select or unselect in multiple ajax :
$(".select2-multiple").on("select2:select", function (c) {
I was try $('#example').DataTable().ajax.reload(); isnt working . i dont know how to put it .
in html
<input type="text" id="type">
in js
(function($){
$('.select2-multiple').select2();
})(jQuery);
$(document).ready(function data_list() {
var type = $('#type').val();
var table = $('#example').DataTable( {
"scrollY": "200px",
"paging": true
/*"ajax": {
"url": "https://",
dataSrc: function ( json ) {
if ( json.status === 'failed' ) {
return [];
}
return json.data;
}
},
"columns": [
{ "data": "appl" },
{ "data": "BankDates" },
{ "data": "State" },
{ "data": "cash" },
{ "data": "cheque" }
],
columnDefs: [
{ width: 100, targets: 0 },
{ "className": "text-center", width: 100, targets: 1 },
{ "className": "text-center", width: 100, targets: 2 },
{ "className": "dt-body-right", width: 100, targets: 3 },
{ "className": "dt-body-right", width: 100, targets: 4 }
]
*/
} );
$(".select2-multiple").on("select2:select", function (c) {
c.preventDefault();
var datas = c.params.data.id;
alert(datas);
//-> i update here parameter type $('#type').val('bank_date');
//i want to call call/reload function data_list datatables with new ajax url and parameter
var column = table.column(datas);
column.visible( ! column.visible() );
});
$(".select2-multiple").on("select2:unselect", function (e) {
e.preventDefault();
var data = e.params.data.id;
alert(data);
var column = table.column(data);
column.visible( ! column.visible() );
});
} );
Maybe you know how to call the function with another way ? or i'm wrong to put it ?
Thanks!
<!--<!DOCTYPE html>-->
<html>
<head>
<title>Simple Client Side</title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="Scripts/blockui.js"></script>
<script>
$(document).ready(function () {
var table = $('#example').DataTable({
"processing": true,
"serverSide": false,
rowId: "employeeId",
"createdRow": function (row, data, dataIndex) { },
"columns": [
{ "data": "first_name" },
{ "data": "last_name"},
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
],
"select": "multi",
"lengthMenu": [5, [10, 15, 25, 50, -1], [5, 10, 15, 25, 50, "All"]],
"pageLength": 5,
"ajax": {
contentType: "application/json; charset=utf-8",
url: "wsSample.asmx/GetAllEmployees",
type: "Post",
data: function (parms) {
data = $("#selMy").val();
return parms
},
dataSrc: "d"
},
order: [[0, 'asc']]
});
$("#selMy").select2().change(function () {
table.ajax.reload();
})
});
</script>
</head>
<body>
<table class="display" id="example" cellspacing="0">
<thead>
<tr>
<th>First</th>
<th>Last</th>
<th>Position</th>
<th>Office</th>
<th>Phone</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr class="searchRow">
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Phone</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<select id="selMy" style="width:200px" multiple><option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
</body>
</html>
I have created jQuery DataTable with ajax which is working fine but I need to add another nested table inside it and it should be search from parent table. Is it possible !!
HTML
<table id="gatePass" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Company Name</th>
<th>From Date</th>
<th>To Date</th>
<th>Area</th>
<th>Status</th>
<!--<th style="display:none">itemId</th>-->
</tr>
</thead>
<tbody></tbody>
</table>
JavaScript
var dataTableExample = 'undefined';
$(document).ready(function () {
loadDataTable();
});
function loadDataTable() {
var a = "/_api/lists/getbytitle('GatePass')/items?$select=Id,Title,FromDate,ToDate,Area,OtherOldBuildingArea,OtherNewBuildingArea,WFStatus&$filter=WFStatus eq 'Approved'";
$.ajax({
url: a,
type: "GET",
dataType: "json",
headers: {
"accept": "application/json;odata=verbose"
},
success: mySuccHandler,
error: myErrHandler
});
}
function mySuccHandler(data) {
if (dataTableExample != 'undefined') {
dataTableExample.destroy();
}
dataTableExample = $("#gatePass").DataTable({
"aaData": data.d.results,
"aoColumns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ mData: "Title" },
{
mData: "FromDate",
mRender: function (data, type, row) {
return moment(data).format('DD-MMM-YYYY hh:mm A');
}
},
{
mData: "ToDate",
mRender: function (data, type, row) {
return moment(data).format('DD-MMM-YYYY hh:mm A');
}
},
{ mData: "Area" },
{ mData: "WFStatus" },
]
});
}
function myErrHandler(data, errCode, errMessage) {
alert("Error: " + errMessage);
}
What is good for nested table to get data directly from ajax or to make dynamic string and to the table. Issue is if I make dynamic string than I think I cannot search on it. Please help me.
I have a problem with responsive datatables. When I resize the window and button was hidden this code, used to know which row is selected, doesn't work:
$('#usersTable tbody').on( 'click', 'button', function () {
usernameSelected = (userTable.row( $(this).parents('tr') ).data().username);
} );
Maybe the problem is on parents('tr'), but how can I get information when table was resized? I use the returned value to recognize the button of which row is clicked. My table use ajax call like this:
if ( ! $.fn.DataTable.isDataTable( '#licensesTable' ) ) {
licenseTable = $('#licensesTable').DataTable({
responsive: true,
//disable order and search on column
columnDefs: [
{
targets: [4,5],
orderable: false,
searchable: false,
}
],
//fix problem with responsive table
"autoWidth": false,
"ajax": "table",
"columns": [
{ "data": "user" },
{ "data": "startDate",
"render": function (data) {
return (moment(data).format("DD/MM/YYYY"));
}
},
{ "data": "endDate",
"render": function (data) {
return (moment(data).format("DD/MM/YYYY"));
}
},
{ "data": "counter" },
{ data:null, render: function ( data, type, row ) {
return '<button type="button" class="btn btn-primary" id="updadteLicense" data-toggle="modal"'
+'data-target="#updateLicenseModal">Update</button>'
}
},
{ data:null, render: function ( data, type, row ) {
return '<button type="button" class="btn btn-danger" id="deleteLicense" data-toggle="modal"'
+'data-target="#deleteLicenseModal">Delete</button>'
}
}
],
});
}
else {
licenseTable.ajax.url("table").load();
}
This is the HTML code relative datatable:
<table id="licensesTable"
class="table table-bordered table-striped">
<thead>
<tr>
<th>User</th>
<th>Start date</th>
<th>Expire date</th>
<th>Max execution</th>
<th>Delete</th>
<th>Update</th>
</tr>
</thead>
</table>
I dont know if this is a good way, but i solved it by adding id to the button.
in Laravel
->addColumn('Datalist',function($loadData){
return '<center><button id='.$loadData->rowID.' type="button" class="btn-showdata"><i class="fa fa-list"></i></button></center>';
})
in javascript:
$(this).on('click','#tableid .btn-showdata',function(){
console.log(this.id);
});
I'm having a problem displaying my data on my jQuery DataTable using AJAX. I'm using the library from datatables.net. I've tried packaging the JSON in many different formats and nothing is working. I've also messed around with the 'columns' section, interchanging 'title' and 'data.' I only have one event to display for now, but the bottom of the table shows something crazy like 4,000 entries. Here is my code:
<script src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#myTable').DataTable({
"processing": true,
"ajax": {
"url": "/api/EventsApi/GetAll",
"dataSrc": ""
},
columns: [
{ title: "Title" },
{ title: "Template" },
{ title: "Capacity" },
{ title: "Boarding Location" },
{ title: "Status" },
{ title: "Edit / Delete" }
//{ "data": "title" },
//{ "data": "eventTemplateID" },
//{ "data": "locomotive.capacity" },
//{ "data": "boardingLocationStart.city" },
//{ "data": "status" },
//{ "data": "status" }
]
});
});
<div class="title-content">#ViewBag.Title</div>
<div id="dataTable">
<table id="myTable" class="table table-hover" style="text-align: center;">
<tbody id="tBody">
<!-- Table body data goes here -->
</tbody>
</table>
</div>
Here is the JSON that's being returned from the AJAX call:
{"data":[{"tripEventID":1,"extraDetails":"this train has special details","eventName":"ZombieTrainEventName ","departureDate":"\/Date(1443715200000)\/","returnDate":"\/Date(1443718800000)\/","eventCapacityOveride":100,"eventTemplateID":3,"title":"The Zombie Train ","companyID":1,"description":"description of zombie train ride ","boardingClosed":30,"status":1,"boardingLocationStart":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"boardingLocationStartTo":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"boardingLocationReturnFrom":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"boardingLocationReturnTo":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"allowFlexableReturnDate":false,"product":[],"productBundle":[{"bundleID":10,"companyID":1,"displayName":" Pumkin Bundle copy Test","price":0.0100,"tax":0.0200,"productList":[]}],"locomotive":{"trainID":1,"companyID":1,"title":"Skunk_Steam ","type":1,"description":"Steam locomotive ","capacity":998,"status":0},"media":{"mediaID":1,"companyID":1,"hero":[],"gallery":[{"mediaDetailID":6,"formatTypeID":2,"fileName":"testimage6.txt","order":1,"path":null,"url":null},{"mediaDetailID":7,"formatTypeID":2,"fileName":"testimage6.txt","order":1,"path":"path6","url":"url6"},{"mediaDetailID":8,"formatTypeID":2,"fileName":"testimage7.txt","order":1,"path":"path7","url":"url7"}],"inside":[{"mediaDetailID":1,"formatTypeID":1,"fileName":"testimage.txt","order":1,"path":null,"url":null},{"mediaDetailID":2,"formatTypeID":1,"fileName":"testimage2.txt","order":1,"path":null,"url":null},{"mediaDetailID":3,"formatTypeID":1,"fileName":"testimage3.txt","order":1,"path":null,"url":null}]},"duration":15,"isExclusive":false,"timeAtDestination":45,"isOneWay":false}]}
Like I said, I've tried repackaging the JSON as nested objects and arrays with nothing working. Am I missing something obvious? Any help is appreciated, thank you!
You have to name the columns in your js like the json index keys like this:
$(document).ready(function() {
$('#myTable').DataTable( {
"ajax": "path/to/your/file.json",
"columns": [
{ "data": "title" },
{ "data": "eventTemplateID" },
{ "data": "eventCapacityOveride" },
{ "data": "boardingLocationStart.streetAddress" },
{ "data": "status" },
{ "data": null }
],
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button>Click!</button>"
} ]
} );
} );
Note that you can define custom data in tables with the columnDefs option.
And than edit your HTML with something like this:
<table id="myTable" class="table table-hover" style="text-align: center;">
<thead>
<tr>
<th>Title</th>
<th>Template</th>
<th>Capacity</th>
<th>Boarding location</th>
<th>Status</th>
<th>Edit / Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Title</th>
<th>Template</th>
<th>Capacity</th>
<th>Boarding location</th>
<th>Status</th>
<th>Edit / Delete</th>
</tr>
</tfoot>
</table>
Here you can find a working fiddle