Trafalgar D Law Trafalgar D Law - 1 month ago 11
Javascript Question

What's wrong with my code?. Learning Bootstrap

I am new to bootstrap and still learning on it. I am current working with this project of my own. I manage to view a data table withouth using a parameter. In my project I have two data tables after I onclick in my first datable a parameter should pass to the second data table(empty)

(sample an ID)
and it will load the data. Without the parameter in my controller and use a specific value in
a.BookTransactionHdrID == 100
it will load. But that's not what I want to happen. Anyone have an idea?.

enter image description here

JS CODE

function fnGetStudentBook(getId) {

if (getId != 0 || getId != undefined || getId != "") {
dtStudBook = $('#dtBook').DataTable({
responsive: true,
processing: true,
info: true,
retrieve: true,
destroy: true,
search: true,
stateSave: true,
lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "All"]],
ajax: {
"url": "/LS/GetStudentBook",
"data": function (d) {
d.BookTransactionDtlID = getId;
}
},
columns:
[
{ data: "BookId", title: "", visible: false, searchable: false },
//{ data: "Barcode", title: "Barcode", searchable: false },
{ data: "Author", title: "Author" }
// { data: "Title", title: "Title", sClass: "alignRight" },
// { data: "DatePublish", title: "Date Publish", sClass: "alignRight" },
// { data: "PlacePublish", title: "Place Publish" },
// { data: "NameOfPublisher", title: "Name Of Publisher"},
// { data: "ISBN", title: "ISBN"},
// { data: "BookTransactionDtlID", title: "", visible: false }
]
});
}
else {
//do nothing..
}
}


CONTROLLER

public JsonResult GetStudentBook(int getId)
{
// int getId = Convert.ToInt32(Request.QueryString["getId"]);
var Data = new List<object>();
Data = (from a in db.BookTransactionDtls
join b in db.Books on a.BookID equals b.BookID
where a.BookTransactionTypeID == 3 && a.BookTransactionHdrID == getId
select new
{
BookId = a.BookID,
//Barcode = b.Barcode,
Author = b.Author
//Title = b.Title,
//DatePublish = b.DatePublished,
//PlacePublish = b.PlacePublished,
//NameOfPublisher = b.NameOfPublisher,
//ISBN = b.ISBN,
//BookTransactionDtlID = a.BookTransactionDtlID
}).OrderBy(a => a.BookId).ToList<object>();
return gf.DataTableAjaxHandlerClientSide(Data);
}


HTML

<div class="col-lg-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-lg-6">
<i class="fa fa-list fa-fw"></i>Book
</div>
</div>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<div class="col-lg-6">
<table class="table table-striped table-bordered table-hover table-responsive nowrap"
role="grid" style="width: 10%;" id="dtBook">
</table>
</div>
</div>
</div>
</div>
</div>


Code for onclick for passing the parameter

var getId = 0;
var dtStudBook = "";
var dtBorrowerName = $('#dtBorrowerName').DataTable({
responsive: true,
processing: true,
info: true,
search: true,
stateSave: true,
order: [[1, "desc"]],
lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "All"]],
ajax: { "url": "/LS/GetBorrower" },
columns:
[
{ data: "BorrowerID", title: "", visible: false, searchable: false },
{ data: "IDNo", title: "ID Number" },
{ data: "Name", title: "Complete Name", sClass: "alignRight", width: " 100px" },
{ data: "BookTransactionHdrID", title: "BookTransactionHdrID", visible: false, searchable: false }
]
});



$('#dtBorrowerName tbody').on('click', 'tr', function (e) {
getId = dtBorrowerName.row(this).data().BookTransactionHdrID;
alert(getId);
fnGetStudentBook(getId)
});

Answer

You can something like this in your ajax like the way of jqgrid.

 ajax: {
        "url": "/LS/GetStudentBook?getId=" + getId
       },

and also if you are familiar with ["Session"]. In your code the Request.QueryString["getId"] is similar to Session.

Hope it helps. Cheers.