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

Both the files have been integrated successfully

The header file are as follows:

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

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>           

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)

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

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

Thanks, Kimz

回答1:

I think you should reinitialize the editable again after pagination. Because your second anchor tag is created dynamically. So use this again after the second page has appeared using pagination

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

回答2:

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

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

来源：https://stackoverflow.com/questions/22351116/bootstrap-pagination-an-inline-implementation