Bootstrap分页是内联实现 [英] Bootstrap pagination an inline implementation
问题描述
重新坐在我的项目的引导程序实施中.
Again sitting with bootstrap implementation for my project.
我正在实现引导程序分页(数据表)和引导程序内联编辑(可编辑).
I'm implementing bootstrap pagination(data-table) and bootstrap inline edit(xeditable).
两个文件都已成功集成
头文件如下:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/DT_bootstrap.css">
<link href="css/bootstrap-editable.css" rel="stylesheet"/>
<script type="text/javascript" language="javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery_002.js"></script>
<script type="text/javascript" language="javascript" src="js/DT_bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-editable.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.editable_class').editable({
type: 'select',
url: 'process.php',
title: 'Enter Value',
validate: function(value) {
if($.trim(value) == '') {
return 'This field is required';
}
}
});
});
</script>
body标签看起来像这样
The body tag looks like this
<a data-original-title="Select a number" data-source="{'0': '0','1': '1', '2': '2', '3': '3', '4': '4', '5': '5', '6': '6', '7': '7', '8': '8', '9': '9', '10': '10'}" data-value="<?php echo $get_my_value; ?>" data-pk="<?php echo $row['book_code']."_".$book_id[$i]['id']; ?>" data-name="book_value" data-type="select" id="book_value" href="#" class="editable_class"><?php echo $get_my_value; ?></a>
问题是: 1.我可以毫无问题地编辑第一页.当我点击分页(即第二页)时，修改无效. 换句话说，该编辑在第一页工作正常，而在接下来的几页(超过10页)中无效.
The problem is: 1. I'm able to edit the first page with no issues. When I click the pagination (i.e. second page) the edit is not working. In other words, the edit works fine in the first page, and not working in the next coming pages (there are more than 10 pages)
-
当我用萤火虫检查时，首页锚标记看起来像这样
When I inspect with firebug the first page anchor tag looks like this
<a class="editable_class editable editable-click" href="#" id="book_value" data-type="select" data-name="book_value" data-pk="1" data-value="5" data-source="{'0': '0','1': '1', '2': '2', '3': '3', '4': '4', '5': '5', '6': '6', '7': '7', '8': '8', '9': '9', '10': '10'}" data-original-title="Enter Value">5</a>
第二个页面定位标记如下所示
The second page anchor tag looks like this
<a class="editable_class" href="#" id="book_value" data-type="select" data-name="book_value" data-pk="1" data-value="5" data-source="{'0': '0','1': '1', '2': '2', '3': '3', '4': '4', '5': '5', '6': '6', '7': '7', '8': '8', '9': '9', '10': '10'}" data-original-title="Enter Value">5</a>
如果比较上述两个锚标记，则很明显，第一页的类名称为" editable_class editable editable-click "，第二页的类名称为" editable_class "
If you compare the above two anchor tag, it is clear that first page the class name is "editable_class editable editable-click" and the second page the class name is "editable_class"
所以我现在也可以确定问题-如何解决?
So I can identify the issue also, now - How to fix it?
任何帮助都会非常有帮助
Any help will be very helpful
谢谢， 金兹
推荐答案
我已修复此问题.问题是我在一个单独的文件夹(js/DT_bootstrap.js)中有分页jquery文件. 我只需要将以下脚本添加到文档中的DT_bootstrap.js文件中即可.
I fixed the issue. The problem is I'm having the pagination jquery file in a separate folder (js/DT_bootstrap.js). I just need to add the below script to DT_bootstrap.js file inside the document get ready.
$('.editable_class').editable({
type: 'select',
url: 'process.php',
title: 'Enter Value',
validate: function(value) {
if($.trim(value) == '') {
return 'This field is required';
}
}
});
为什么我担心的是，我在这方面摔了两天，现在才修好它. 可能是-我的记忆力差了2天. 为了以答案结束这个问题，只需要我们使用可编辑的内联脚本来更新分页jquery文件，因为分页文件(js)并不知道内联编辑. 谢谢 金兹
Why I'm concerned is, i was breaking my head in this for two days and fixed it just now. May be - My bad memory which took 2 days. To end this question with answer, just we need to update the pagination jquery file with the editable inline script since the pagination file(js) is not aware of the inline edit. Thanks Kimz
这篇关于Bootstrap分页是内联实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
