Hello i'm trying to pass Datatable from view to my controller. Here is my Datatable code in view :
<div class="table-responsive">
<table id="example1" class="table table-bordered table-hover display">
<thead>
<tr>
<th><input type="checkbox" name="select_all" value="1" id="example-select-all" /></th>
<th>No</th>
<th>Id</th>
<th>Exemplar</th>
<th width="40%">Title</th>
</tr>
</thead>
<tbody id="bookTable"></tbody>
</table>
</div>
And here is my javascript code :
$('#printLabel').click(function(e) {
e.preventDefault();
$.post("{{ url('admin/printselectedlabel') }}",
//$('#searchForm').serialize())
table1.$('input,select,textarea').serialize()).fail(function(data) {
alert(data.responseJSON.error);
});
});
The codes above gave me error : {error: "Unauthenticated."}. Also, i'm not sure if "table1.$('input,select,textarea').serialize())" is the right why to pass datatable to controller.
Here is my route :
Route::group(['prefix' => 'admin'], function () {
Route::post('/printselectedlabel', 'Admin\PrintLabelController#printSelectedLabel');});
I havent add any code yet inside the printSelectedLabel() function inside the PrintLabelController
public function __construct()
{
$this->middleware('admin');
}public function printSelectedLabel(Request $request){
}
Related
I have a table inside a div in my Index.cshtml page (Asp.Net core)
<div id="tbldiv">
<table
id="tblCampaign"
class="table"
data-toggle="table">
<thead>
<tr>
<th data-field="name" scope="col">Name</th>
<th data-field="country">Country</th>
<th data-field="totalBudget">Total Budget</th>
<th data-field="dailyBudget">Daily Budget</th>
<th data-field="model">Model</th>
<th data-field="payout">Payout</th>
<th data-field="status">Status</th>
<th data-field="link">Link</th>
<th data-field="advertiserID">Advertiser ID</th>
</tr>
</thead>
</table>
</div>
I want to populate my table using Bootstrap table.
Here's my site.js:
$(document).ready(function () {
$('Index').ready(function () {
$.getJSON('Index?handler=ListCampaigns', function (data) {
$("#tblCampaign").bootstrapTable({
columns: data
});
});
});
});
My OnGetListCampaign() in Index.cshtml.cs:
public JsonResult OnGetListCampaigns()
{
var jsonCampaigns = CampaignManager.GetCampaignsTest();
return new JsonResult(jsonCampaigns);
}
Which Select from SQL database and return a List of my Item.
Here's my problem:
When I run it, it complains about the selector in site.js if I understood the problem, I used $("#tblCampaign") for and it should be right to select the Id using #
Uncaught Error: Syntax error, unrecognized expression: <div class="bootstrap-table bootstrap4">
<div class="fixed-table-toolbar"></div>
<div class="fixed-table-container">
<div class="fixed-table-header"><table></table></div>
<div class="fixed-table-body">
<div class="fixed-table-loading">
<span class="loading-wrap">
<span class="loading-text">Loading, please wait</span>
<span class="animation-wrap"><span class="animation-dot"></span></span>
</span>
</div>
</div>
<div class="fixed-table-footer"><table><thead><tr></tr></thead></table></div>
</div>
<div class="fixed-table-pagination"></div>
</div>
I'm trying to set the text of an HTML element but I'm unable to do so through JQuery
class selector .text() function. It is somehow unable to find the element to set. The function was able to find the element when it was called in the document.ready() function but due to functional requirements, I moved it into an API call instead. The API call is unable to find and set a particular set of elements. There are other elements on the page utilizing the same class which was set successfully.
Documented below are the two boot grid tables in which column fields I'm trying to set the values. Note that they exist on the same HTML page.
Currently only the columns in ItemTbl can be set and reflected by the $(".accrMonth").text(values) function.
I've attempted to switch their position on the webpage but still only ItemTbl is being set
Attached a screenshot Output of searching for the class
function setDatesSO(dateString) {
var dateParts = dateString.split("/");
var reviewPeriod = new Date(+dateParts[2], dateParts[1] - 1, +dateParts[0]);
console.log("table 1: " + $("#test1").hasClass("accrMonth2"));
console.log("table 1: " + $("#test2").hasClass("accrMonth1"));
console.log("table 1: " + $("#test3").hasClass("accrMonth"));
console.log("table 2: " + $("#test4").hasClass("accrMonth2"));
console.log("table 2: " + $("#test5").hasClass("accrMonth1"));
console.log("table 2: " + $("#test6").hasClass("accrMonth"));
reviewPeriod.setMonth(reviewPeriod.getMonth() - 1);
$(".accrMonth").text(reviewPeriod.toLocaleString('en-GB', {
month: 'long'
}));
reviewPeriod.setMonth(reviewPeriod.getMonth() - 1);
$(".accrMonth1").text(reviewPeriod.toLocaleString('en-GB', {
month: 'long'
}));
reviewPeriod.setMonth(reviewPeriod.getMonth() - 1);
$(".accrMonth2").text(reviewPeriod.toLocaleString('en-GB', {
month: 'long'
}));
}
<table id="OverviewTbl" class="table table-striped table-hover" style="word-wrap: break-word;">
<thead>
<tr>
<th data-column-id="accrMonth2" id="test1" class="accrMonth2">MONTH-3</th>
<th data-column-id="accrMonth1" id="test2" class="accrMonth1">MONTH-2</th>
<th data-column-id="accrMonth" id="test3" class="accrMonth">MONTH-1</th>
</tr>
</thead>
</table>
<table id="ItemTbl" class="table table-striped table-hover" style="word-wrap: break-word;">
<thead>
<tr>
<th data-column-id="accrMonth2" id="test4" class="accrMonth2">MONTH-3</th>
<th data-column-id="accrMonth1" id="test5" class="accrMonth1">MONTH-2</th>
<th data-column-id="accrMonth" id="test6" class="accrMonth">MONTH-1</th>
</tr>
</thead>
</table>
Function API call,note that startDate value is valid as results are updated for ItemTbl.It is called when user clicks a button.
$.ajax({
type: "POST",
url: getReviewById,
data: JSON.stringify(form),
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function (xhr) {
xhr.setRequestHeader(csrfHeader, csrfToken);
},
success: function (jd) {
setDatesSO(jd.startDate);
},
});
I dont see error as you could see in my sample
console.log($('#test1').hasClass("accrMonth2"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="OverviewTbl" class="table table-striped table-hover" style="word-wrap: break-word;">
<thead>
<tr>
<th data-column-id="accrMonth2" id="test1" class="accrMonth2">MONTH-3</th>
<th data-column-id="accrMonth1" id="test2" class="accrMonth1">MONTH-2</th>
<th data-column-id="accrMonth" id="test3" class="accrMonth">MONTH-1</th>
</tr>
</thead>
</table>
<table id="ItemTbl" class="table table-striped table-hover" style="word-wrap: break-word;">
<thead>
<tr>
<th data-column-id="accrMonth2" id="test4" class="accrMonth2">MONTH-3</th>
<th data-column-id="accrMonth1" id="test5" class="accrMonth1">MONTH-2</th>
<th data-column-id="accrMonth" id="test6" class="accrMonth">MONTH-1</th>
</tr>
</thead>
</table>
are you sure your table is loaded?
Hello everyone I am trying to bind a table in angulajs. I am getting data from database in table and trying to fill that table.
Here I did
$scope.getPageDetails = function () {
$http.get('/api/privilege/getpagedetails/')
.success(function (data, status) {
$scope.Page = data;
console.log($scope.Page);
}).error(function () {
});
}
then i get the data in $scope.Page which is defined as $scope.Page = []; here i am attaching the console image that i am getting data in $scope.page
and here is my table
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
ID
</th>
<th>
PageName
</th>
<th>
PageUrl
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Page in Pages">
<td>{{Page.id}}</td>
<td>{{Page.pageName}}</td>
<td>{{Page.pageUrl}}</td>
<td>
<input type="checkbox" value="Edit" />
</td>
</tr>
</tbody>
</table>
please help where I am missing I will be very thankful to you all.
In your view you are iterating over Pages, but I dont see it defined in your controller.
Change
$scope.Page = data;
to
$scope.Pages = [data];
Final Code
HTML:
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
ID
</th>
<th>
PageName
</th>
<th>
PageUrl
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Page in Pages">
<td>{{Page.id}}</td>
<td>{{Page.pageName}}</td>
<td>{{Page.pageUrl}}</td>
<td>
<input type="checkbox" value="Edit" />
</td>
</tr>
</tbody>
</table>
controller:
$scope.getPageDetails = function () {
$http.get('/api/privilege/getpagedetails/')
.success(function (data, status) {
$scope.Pages = [data];
}).error(function () {
});
}
EDIT: if your data is an object make it an array, so ng-repeat can iterate over it
$scope.getPageDetails = function () {
$http.get('/api/privilege/getpagedetails/')
.success(function (data, status) {
$scope.Pages = data; //change page to pages in whole code,
//no need to change any thing in html page
console.log($scope.Pages);
}).error(function () {
});
}
$scope.Page in controller vs Pages in your HTML ng-repeat binding, you need to write $scope.Pages :)
Change $scope.Page = data to $scope.Pages = data.
I need to use Angularjs datatable for my project for the features like search and sorting etc.
My current structure is :-
HTML
<table datatable="" class="table table-striped table-bordered row-border hover" ng-show=query_executed>
<thead >
<tr >
<th ng-repeat="x in keys">{{x}}</th>
</tr>
</thead>
<tbody style="overflow-y: scroll;">
<div class="ScrollStyle">
<tr ng-repeat="y in myWelcome">
<td ng-repeat="z in y">{{z}}</td>
</tr>
</div>
</tbody>
</table>
Here keys contain column names.
y is rows and z is elements of rows.
JavaScript
$scope.GetQueryResult = function() {
$http.get('view2/datafile.html')
.success(function(data, status, headers, config) {
$rootScope.myWelcome = data[1]["result_text"]["data"][0]["chunk_data"];
$rootScope.colname = $rootScope.myWelcome[0];
var key, x;
$rootScope.keys = [];
for (key in $rootScope.colname) {
if ($rootScope.colname.hasOwnProperty(key))
($rootScope.keys).push(key);
}
})
.error(function(data, status, header, config) {
$rootScope.myWelcome = status;
});
};
But the problem is i am not getting required features described above.
Current page:-
view of my current page
I would like to know the problem with the code.
Thanks.
index.html:
<div ng-view="myview.html"></div>
myview.html:
<table class="table table-striped table-hover">
<tr>
<td>Name</td>
<td>Product</td>
</tr>
<tr ng-repeat="deal in deals" class="clickableRow">
<td>{{deal.name}}</td>
<td>{{deal.product}}</td>
</tr>
</table>
script.js:
$(document).ready(function($) {
$(".clickableRow").click(function() {
console.log("click");
});
}); // does nothing
console.log($(".clickableRow").length) // returns 0
I want to do some work when the user clicks on the clickableRows rows.
Thanks
why do you mix jquery and angularjs like this ? you can just do it with angularjs
<tr ng-repeat="deal in deals" ng-click="clickRow(deal)">
and in your controller
$scope.clickRow = function(deal) {
console.log(deal)
}