我是Jquery数据表的新手。
我的代码：
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript"
src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript"
src="jquery.bpopup-0.8.0.min.js">
</script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"
rel="stylesheet"
type="text/css"/>
<link href="//cdn.datatables.net/tabletools/2.2.1/css/dataTables.tableTools.css"
rel="stylesheet"
type="text/css"/>
<script type="text/javascript">
var grid;
function RowSelected(rowObject) {
var selRow = this.GetCellByColumnUniqueName(rowObject, "dmsl");
//window.alert(selRow.innerHTML);
//here selRow.innerHTML will hold the value for the selected row contact name
}
function GridCreated() {
grid = this;
}
function scheduleTraining(id) {
window.location = '../training/SoldierTraining.aspx?id=' + id;
}
$(document).ready(function () {
//Setup - add a text input to each footer cell
$('#dmsl tfoot th').each(function () {
var title = $(this).attr("title");
$(this).html('<input type="text" placeholder="Search ' + title + '" style="font-family:Verdana;font-size:10px;" />');
});
// DataTable
var dmslTable = $('#dmsl').DataTable({
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true, //adds first, last, prev, next, page buttons
"sAjaxSource": "getdmsl_data.aspx",
"language": { "emptyTable": "No records to display" }, //handle no records return
"bProcessing": true,
"sDom": '<"H"<"floatright"l>r>t<"F"i<"floatright"p>>', //this removes the global search box from the beginning of the page '<"H"flr>t<"F"ip> would add the search to the header
"lengthMenu": [[10, 15, 20, 50, -1], [10, 15, 20, 50, "All"]], //add All option to # of records menu
"oLanguage": { "sInfoFiltered": "" },
"aaSorting": [[1, 'asc'], [2, 'asc']] , //inital sort should be by these columns
"columnDefs": [{
"targets": 0,
"data": null,
"mRender": function (data, type, full) {
return '<a ><img src="../images/edit.gif" style="height:18px;width:19px;cursor:pointer;" alt="Edit"></img></a>';
}
}]
});
// Apply the search
dmslTable.columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this.value) {
that
.search(this.value.replace(/[^a-zA-Z0-9]+/g, '')) //only allow letters and numbers in search box
.draw();
}
});
});
$('#dmsl tbody').on('click', 'tr', function (e) {
var that = this;
e.preventDefault();
var rowIndex = $(this).find('td:eq(2)').text();
//alert(rowIndex);
//Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup();
});
});
</script>
<div id="element_to_pop_up">Content of popup</div>
<div class="codeTabLabel" style="text-align: left;">Warfighter Profiles</div>
<div class="module" id="pageInfoDiv" style="margin-right: 11px; text-align: left;">
Use this window to find and update selected Warfighter personal information.
Read-only data must be updated by EMILPO transaction.
<br />
<br />
To locate a Warfighter, enter search criteria in one or more text boxes
and click any filter icon
(<asp:Image ID="Image2" runat="server" ImageUrl="~/images/filter.gif" />)
to display its filter menu. Select from the filter menu.
To edit a Warfighter’s personal information click on the corresponding
Edit (<asp:Image ID="Image1" runat="server" ImageUrl="~/images/edit.gif" />)
icon and make your change(s).
<br /><br />
To make a training reservation for a Warfighter, click the calendar
icon (<asp:Image ID="Image3" runat="server" ImageUrl="~/images/schedule.gif" />)
and select the Required Training course. You will be offered a Class Schedule
for the selected course. Click the magnifying glass
(<asp:Image ID="Image4" runat="server" ImageUrl="~/images/zoom.gif" />)
in the Required Training panel to view seat availability by class.
Click a calendar icon in the Required Training panel to reserve a seat in the
most appropriate class based on available seats and your unit training cycle.
A User Notification message displays the result of your action.
<br /><br />
To sort data by any column heading, click the heading.
To reverse the sort order click the heading again.
</div>
<br />
<div id="DMSLSelection" style="position: relative; margin-left: 5px; margin-right:10px;height:120px;">
<fieldset style="border-color: #FFDE28; height:100px;width:100%;">
<legend class="module"><strong>Unit Selection</strong></legend>
<table align="center" id="Table2" cellspacing="1" cellpadding="0" width="100%" border="0">
<tbody>
<tr><td> </td></tr>
<tr>
<td>
<Telerik:RadComboBox ID="DMSLSelect" runat="server" Width="400px" Height="150px" AutoPostBack="true" AppendDataBoundItems="True">
<Items>
<Telerik:RadComboBoxItem Value="" Text="Select Unit"/>
</Items>
</Telerik:RadComboBox>
</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
<div style="text-align:center;" id="divLegend" runat="server">[<asp:Image ImageAlign="Middle" ImageUrl="~/images/greenline.jpg" ID="Image5" runat="server" />] indicates Warfighter on orders (gain)</div>
<br />
<fieldset id="wrapperfield" style="border-color: #FFDE28; height:auto;width:100%;" runat="server">
<div id="wrapper" runat="server" >
<div class="floatright"></div>
<table id="dmsl" class= "hover stripe compact nowrap">
<thead>
<tr>
<th></th>
<th>UIC</th>
<th>SSN<br />(Last Four)</th>
<th>Warfighter</th>
<th>Pay Grade</th>
<th>MOS</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>UIC</td>
<td>SSN</td>
<td>Warfighter</td>
<td>Pay Grade</td>
<td>MOS</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th title="UIC"></th>
<th title="SSN"></th>
<th title="Warfighter"></th>
<th title="Pay Grade"></th>
<th title="MOS"></th>
</tr>
</tfoot>
</table>
</div>
</fieldset>
</asp:Content>
$('#element_to_pop_up').bPopup(); give serror
答案 0 :(得分：1)
错误表明bPopup库未正确加载。
您已经提到了CDN中所有必需的JS库，而
jquery.bpopup-0.8.0.min.js
单独给予没有CDN。
确认您的本地服务器中有特定的JS库文件。
另外，尝试使用CDN for Jquery Bpopup。
https://cdnjs.cloudflare.com/ajax/libs/bPopup/0.9.0/jquery.bpopup.js