我的代码怎么了？学习Bootstrap [英] What's wrong with my code?. Learning Bootstrap

问题描述

我刚刚开始练习，还在继续学习。我目前正在与我自己的这个项目合作。我设法使用参数查看数据表。在我的项目中，我有两个数据表，在我的第一个datable中，单击一个参数应该传递到第二个数据表（空）（示例一个ID），它将加载数据。没有控制器中的参数，并在 a.BookTransactionHdrID == 100 中使用特定值，它将加载。但这不是我想要发生的事情。任何人都有想法？

< img src =https://i.stack.imgur.com/3MLeA.pngalt =在此输入图像说明>

JS CODE

 函数fnGetStudentBook（getId）{
 
 if（getId！= 0 || getId！= undefined || getId！=）{
 dtStudBook = $（'＃dtBook'）。DataTable（{
 respond：true，
 processing：true，
 info：true，
 retrieve：true，
 destroy：true，
 search：true，
 stateSave：true，
 lengthMenu：[[5，10 ，20，-1]，[5，10，20，全部]]，
 ajax：{
url：/ LS / GetStudentBook，
data函数（d）{
 d.BookTransactionDtlID = getId; 
} 
}，
列：
 [
 {数据：BookId，标题：，可见：false，可搜索：false}，
 // {data：条形码，标题：条形码，可搜索：false}，
 {data ：作者，标题：作者} 
 // {data：Title，title：Title，sClass：alignRight}，
 // {data：DatePublish标题：Date Publish，sClass：alignRight}，
 // {data：PlacePublish，标题：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 
在a.BookID上的db.Books中加入b等于b.BookID 
其中a.BookTransactionTypeID == 3&& a.BookTransactionHdrID = = getId 
选择新
 {
 BookId = a.BookID，
 //条形码= b.Barcode，
作者= 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>预订
< / 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 =gridstyle =width：10％; id =dtBook> 
< / table> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

用于传递参数的onclick代码

  var getId = 0; 
 var dtStudBook =; 
 var dtBorrowerName = $（'＃dtBorrowerName'）。DataTable（{
 respond：true，
 processing：true，
 info：true，
 search：true， 
 stateSave：true，
 order：[[1，desc]]，
 lengthMenu：[[5，10，20，-1]，[5，10，20，所有]]，
 ajax：{url：/ LS / GetBorrower}，
列：
 [
 {data：BorrowerID，title： ，可见：false，searchable：false}，
 {data：IDNo，标题：ID号}，
 {data：Name，标题：Complete Name，sClass： alignRight，width：100px}，
 {data：BookTransactionHdrID，title：BookTransactionHdrID，visible：false，searchable：false} 
] 
}）; 
 
 
 
 $（'＃dtBorrowerName tbody'）。on（'click'，'tr'，function（e）{
 getId = dtBorrowerName.row这个）.data（）。BookTransactionHdrID; 
 alert（getId）; 
 fnGetStudentBook（getId）
}）; 
  

解决方案

您可以在 ajax 喜欢jqgrid的方式。

  ajax：{
url ：/ LS / GetStudentBook？getId =+ getId 
}，
  

你熟悉 [Session] 。在你的代码中， Request.QueryString [getId] 类似于Session。

希望它有帮助。干杯。

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?.

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)
 });

解决方案

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.

这篇关于我的代码怎么了？学习Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！