I am having a jquery data table in which there is a description field, I want to limit the words to 30 and add a show more link. when the user clicks on the show more the comment of that particular id will open in the bootstrap modal. Till now I am able to do this much, but the comment is not coming in the bootstrap modal.
<script type="text/javascript">
$(document).ready(function () {
$(document).on("click", ".opencomment", function () {
var mycomment = $(this).data('FeedbackID');
$(".modal-body #commentdesc").val(mycomment);
});
$('#FeedbackDetails').DataTable({
"processing": true,
"ajax": {
"url": "/ViewFeedback/LoadData",
"type": "GET",
"datatype": "json"
},
"lengthMenu": [
[5, 10, 25, 50, 100, -1],
[5, 10, 25, 50, 100, "All"]
],
"autoWidth": true,
"responsive": true,
"lengthChange": true,
"ordering": true,
"fnRowCallback" : function(nRow, aData, iDisplayIndex){
var oSettings = this.fnSettings();
$("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);
return nRow;
},
"columns": [
{ "data": null, "autoWidth": true },
{ "data": "FeedbackUserName", "name": "User Name", "autoWidth": true },
{ "data": "FeedBackUserEmailID", "name": "Email ID", "autoWidth": true },
{ "data": "FeedBackComment", "name": "Comment", "autoWidth": true },
{ "data": "Designation", "name": "Designation", "autoWidth": true },
{ "data": "Organization", "name": "Organization", "autoWidth": true },
{ "data": "ContactNo", "name": "Contact No", "autoWidth": true },
{ "data": "City", "name": "City", "autoWidth": true },
{
"data": "FeedBackDate", "name": "Feedback Date", "autoWidth": true,
'render': function (jsonDate) {
var date = new Date(parseInt(jsonDate.substr(6)));
var month = date.getMonth();
return date.getDate() + "/" + month + "/" + date.getFullYear();
}
},
],
columnDefs: [{
targets: 3,
data:"FeedbackID",
render: function (data, type, row, meta) {
if (type === 'display' && data.length > 40) {
return '<span title="' + data + '">' + data.substr(0, 38) + '...<a href="" data-id="'+data+'" data-toggle="modal" class="opencomment" data-target="#myModal">Show More</a>';
}
else {
return data;
}
}
}],
"language": {
"emptyTable": "No Events Found Related To This User"
}
});
});
</script>
<div class="container" style="margin-top:10px">
<table id="FeedbackDetails" class="ui celled table">
<thead>
<tr>
<th>S.No</th>
<th>User Name</th>
<th>Email ID</th>
<th>Comment</th>
<th>Designation</th>
<th>Organization</th>
<th>Contact No</th>
<th>City</th>
<th>Feedback Date</th>
</tr>
</thead>
</table>
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Feedback Comment</h4>
</div>
<div class="modal-body">
<p id=""></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
public ActionResult LoadData()
{
using (DHIFeedbackEntities2 Ms = new DHIFeedbackEntities2())
{
var feedbacklist = Ms.FeedBacks.ToList<FeedBack>();
return Json(new { data = feedbacklist }, JsonRequestBehavior.AllowGet);
}
}
