引导分页内联实现

Question

再次讨论我的项目的引导实现。

我正在实现引导分页(数据表)和引导内联编辑(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>

身体标签看起来像这样

        <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页)。

1. 当我使用firebug检查时，第一个页面锚标签如下所示 5

第二个页面锚标签如下所示

    <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_class。

所以我也可以找出问题，现在-如何解决它？

任何帮助都会很有帮助

谢谢你，金兹

Answer 1

我认为您应该在分页之后重新初始化editable。因为第二个锚标记是动态创建的。所以在第二个页面出现后再使用这个页面。

$('.editable_class').editable({
        type: 'select',
        url: 'process.php',
        title: 'Enter Value',
        validate: function(value) {
        if($.trim(value) == '') {
            return 'This field is required';
        }
    }
    });

Answer 2

我解决了这个问题。问题是，我的分页jquery文件位于一个单独的文件夹中(js/DT_bootstrap.js)。我只需要将下面的脚本添加到文档中的DT_bootstrap.js文件中--准备就绪。

  $('.editable_class').editable({
    type: 'select',
    url: 'process.php',
    title: 'Enter Value',
    validate: function(value) {
    if($.trim(value) == '') {
        return 'This field is required';
    }
}
});

我担心的是，我在这件事上花了两天时间才把它修好。可能是-我记性不好花了两天时间。为了以答案结束这个问题，我们只需要用可编辑的内联脚本更新分页jquery文件，因为分页文件(Js)不知道内联编辑。谢谢金兹