We Keep Coding

Add data table pagination

I want to add data table pagination:
<div class="table-responsive">
<table class="table table-bordered"id="dataTable" cellspacing="0">
... continue

Using jQuery you can add pagination via new class added to your table-responsive as below:
$(document).ready(function () {
$('#dataTable').DataTable(); //your data table id
$('.table-responsive').addClass('bs-select'); //add class
});

Get content of the dynamically created element using jquery

Using server side process I have created my table and I am loading some data in a element like bellow
I want the content of class more element, I tried using ready, load but I am getting undefined when alert is made so please someone help me
My Whole code is here
<div class="container margin_120" id="form1">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<div id="tools">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h4 class="inner margin_5_tb"><i class=""></i>View Counts of Students Needing Financial Assistance<button type="button" id="button1" style="border:none;background-Color:#EAECEE; float: right;font-size:12px" ><u>Hide</u></button></h4>
</div>
</div>
</div><!--/tools -->
<div class="form-group" id="countTableDes">
<table class="table table-bordered" id="loan_data">
<thead>
<tr>
<th>Student Name</th>
<th>Student Photo</th>
<th>some data</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<script src="<?php echo base_url(); ?>assets/js/jquery-1.11.2.min.js"></script>
$(document).ready(function(){
var dataTable = $('#loan_data').DataTable({
"processing":true,
"serverSide":true,
"autoWidth": false,
"order":[],
"ajax":{
url:'<?php echo site_url("home/getLoans"); ?>',
type:"POST"
},
"columns":[
{ 'data' : 'stu_firstName' },
{ 'data' : 'id',
'render':function(id,data,row){
if(row.stu_passportPhoto && row.stu_passportPhoto!=null){
return '<p class="more"><b>About me</b> <br/>'+row.stu_aboutStudent+'</p>';
}
}
},
{
'data' : 'stu_somedata'
},
]
});
//Here I want to get each more class content.
$(document).find(".more").each(function(){
var content = $(this).text();
alert(content);
});
});
</script>

As the elements with the class "more" are created dynamically by the DataTable, you have to wait until the table or at least the row has been drawn completely. In order to do so, you have to hook into one of the available callbacks that DataTables offers:
https://datatables.net/reference/option/
Which one exactly depends on your needs, presumably drawCallback should work for your case, or you could also use createdRow for each row separately.
This is the example snippet from the docs, adapted to illustrate your case:
$('#loan_data').dataTable( {
// rest of your options goes here...
"drawCallback": function( settings ) {
// you'll want to select only inside your table,
// not the whole document, for performance reasons:
$('#loan_data').find(".more").each(function(){
var content = $(this).text();
alert(content);
});
}
} );

The problem might be the way datatable is rendered and how column:render is executed,
Worst case scenario is to use a mutator, or an event listener
such as Arrive.js
here is the link,
https://github.com/uzairfarooq/arrive/blob/master/src/arrive.js
It will listen to newly created elements and you can run something inside its function,
Do something like this,
$(document).arrive(".more", function() {
// 'this' refers to the newly created element
var content = $(this).text();
alert(content); /* do something */
});

ng-click is not working with return $sce.trustAsHtml in angular js without using html code in html page?

I am implementing data table and displaying some icon in the column. And putting ng-click in the font-awesome icon. But ng-click is not working.
Controller:
this.standardOptions = DTOptionsBuilder
.fromFnPromise(Rl.all('xyz/abc').getList())
.withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
"t" +
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>")
.withBootstrap();
function actionRenderer(data) { // inject $sce if required.
console.log(data);
return $sce.trustAsHtml('<i class="fa fa-repeat cursor-pointer" aria-hidden="true" ng-click="volume()"></i> </a>');
}
this.standardColumns = [
DTColumnBuilder.newColumn('id').renderWith(actionRenderer),
];
function volume(){
alert("-----");
}
HTML
<div class="widget-body no-padding">
<table datatable dt-options="datatables.standardOptions" dt-columns="datatables.standardColumns" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th>Refresh</th>
</tr>
</thead>
</table>
</div>
I putted ng-click="volume()" But it is not working. I have seen links but in these links mentioned ng-bind-html in html page. But in my code I am not coding in html page. Only from java-script append the icon.
1.After using $sce.trustAsHtml, ng-click not working
2.Accessing ng-click when rendered via $sce.trustAsHtml
I am only hard code the column heading like Refresh. And definition append by javascript.

Cannot read property 'insertBefore' of null at forEach.after

I have a very simple html page where I am loading two different html files using ng-include :-
<body ng-controller="testCtrl">
<div class="panel panel-primary">
<h3 class="panel-heading">Test</h3>
<ng-include src="'View/Details.html'" ng-show="details" />
<ng-include src="'View/Summary.html'" ng-show="summary" />
</div>
</body>
Initially only the details variable is true thus it is loading Details view which looks like this:-
<div class="panel-body">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
and here is the controller for reference:-
.controller("testCtrl", function ($scope) {
$scope.loadItems = function () {
$scope.items= [
{ id: 1, name: "dummy" },
{ id: 2, name: "dummy1" },
{ id: 3, name: "dummy2" }
];
}
$scope.loadItems();
}
When I load the page it is displaying the data properly but no events are getting triggered (all button click handlers are attached via ng-click & associated with behaviors defined in controller) so I went ahead and checked the console, it is displaying the following error:-
TypeError: Cannot read property 'insertBefore' of null
at forEach.after (myUrl)
at Object.JQLite.(anonymous function) [as after]
I am pretty new to Angular. I saw few threads and tried to manipulate my mark-up code but no luck.

You cant <ng-include/> -- should be <ng-include></ng-include>. Also ng-if is usually better than ng-show, since it reduces amount of result html.
Rest works: plnkr.co/edit/EmUYuHltWaXnjEC6juid?p=preview.

jQuery dataTable overflows in bootstrap modal

I have a table inside a bootstrap modal. The content that I populate inside the dataTable cells is quite large, and instead of wrapping the text to fit the table inside the modal, it overflows the modal, like it is unable to pick up the modal width and wrap the text.
Screenshot:
I have tried various solutions, such as specifying wrap CSS as well as specifying the table width (in % and px) and setting the width property on the table (in % and px) but there is absolutely no change to the table. Any advice on how to correct this issue would be greatly appreciated.
Code Extract 1 (Modal):
<!-- List Questions Modal -->
<div class="modal fade" id="questionsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" style="width: 95%">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Questions</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="responsive-table">
<table width="900px" class="table table-bordered" style="margin-bottom:2em; width: 900px;" id="questionsTable">
<thead>
<tr>
<th >Code</th>
<th>Title</th>
<th>Instruction</th>
<th>Extract</th>
<th>class="text-center">Active</th>
<th class="text-center">Edit</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
Code Extract 2 (dataTable population):
function showQuestions(quiz_id)
{
$('#questions_quiz_id').val('quiz_id');
window.questionsTable.fnClearTable();
$.post('{{ url("getGameQuestions") }}', {quiz_id : quiz_id})
.done(function(data)
{
if (typeof(data.error) != 'undefined')
{
$('#error-msg').html(data.error);
$('#page-error').fadeIn(300).delay(2000).fadeOut(500);
}
else
{
for(var d in data)
{
var question = data[d];
var active = (question.active == undefined || question.active == false) ? "Inactive" : "Active";
var ai = window.questionsTable.fnAddData([
question.code,
question.title,
question.instruction,
question.extract,
active,
'<i class="icon-pencil" style="cursor:pointer; color:#E48A07;" title="Edit" onclick="setQuestion('+question.id+')"></i>'
]);
var oSettings = window.questionsTable.fnSettings();
var addedRow = oSettings.aoData[ai[0]].nTr;
addedRow.cells.item(2).setAttribute('width','29%');
addedRow.cells.item(4).className = "text-center";
addedRow.cells.item(4).className = "text-center";
addedRow.cells.item(5).className = "text-center";
}
$('#questionsModal').modal('show');
}
});
}

Try removing
<div class="responsive-table"> it might be causing responsive widths in the modal to fail.
You could also try specifying a max-width on the table.
This might be slightly related although it was a problem with Bootstrap 2.3.2 and it looks like you are using 3.
http://www.bootply.com/88364

This question is asked here
datatables does not becomes responsive on bootstrap3 modal dialog
I would suggest you enable the Datatables Responsive extension, ditch the wrapper and use this snippet of code instead.
//once the modal has been shown
$('#yourModal').on('shown.bs.modal', function() {
//Get the datatable which has previously been initialized
var dataTable= $('#yourResponsiveDataTableInModal').DataTable();
//recalculate the dimensions
dataTable.columns.adjust().responsive.recalc();
});

After trying so many solutions i found one who works for me!
Just put the table inside a div and define the CSS inside the code.
<div style="overflow:auto;">
<table>
.....
</table>
</div>
I hope this help!!

Remove the <div class="row"> and check.
Am also experienced same problem,after i removed the div, i got it perfectly.

After trying so many solutions i found a solution.
Just put the table inside a div and define the CSS inside the code.
<div style="overflow:auto;">
<table>
.....
</table>
</div>
I hope this help!!

<div class="modal-body">
<div class="row table-responsive">
<div class="col-sm-12">
<table id="example" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="site_name">
Feedback
</th>
<th>
Ticket Id
</th>
<th>
Date of Creation
</th>
<th>
Classification
</th>
<th>
Topic
</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
</div>

initialize the datatable like that
initialize the datatable when open the modal.first time when we open the modal i==1 second thime i==2 so datatble cant reinitalize again and again does not give any alert box like datatable already initalize
var i=1;
$('#myModal').on('shown.bs.modal', function (e) {
if(i==1){
var oTable=$('#questionsTable').DataTable();
}
i++;
});

Just insert your table inside a div with "table-responsive" class:
<div class="table-responsive">
//Your table here
</div>