Its not working when i'm adding dynamically a value in an object variable

Question

The html code is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Pagination plugin</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
    <script src="../jquery.twbsPagination.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
    <nav aria-label="Page navigation">
        <ul class="pagination" id="pagination"></ul>
    </nav>
</div>
<script type="text/javascript">
    $(function () {
 //var myVar = 5;
        var obj = $('#pagination').twbsPagination({
            totalPages: 35,
            visiblePages: 5,
            onPageClick: function (event, page) {
                //console.info(page);
            }
        });
  
        //console.info(obj.data());
  //console.log(obj);
  
    });
</script>
</body>
</html>

It creates a pagination.

Here, the variable , totalPages has value assigned but i wanted to do it after searching this site dynamically like below

$(function () {
var myVar = 5;
    var obj = $('#pagination').twbsPagination({
        totalPages: null,
        visiblePages: 5,
        onPageClick: function (event, page) {
            //console.info(page);
        }
    });
    obj[totalPages] = myVar; //or
    //obj.totalPages = myVar;
    //console.info(obj.data());
    //console.log(obj);

});

But, it doesnt work, showing no errors, showing nothing.Whats wrong with that? I saw, we can assign value of a object variable, in this way.

Possible duplicate of [JavaScript property access: dot notation vs. brackets?](https://stackoverflow.com/questions/4968406/javascript-property-access-dot-notation-vs-brackets) — Dexygen, Dec 28 '17 at 01:43
@GeorgeJempty I tried in both way, doesnt work in any ways.. — Rubel Ahmed, Dec 28 '17 at 01:44
@GeorgeJempty its pagination [plugin](https://esimakin.github.io/twbs-pagination/) jquery — Muhammad Omer Aslam, Dec 28 '17 at 01:55
can you show a working snippet with hardcoded total pages value — snit80, Dec 28 '17 at 02:19
Your code snippet does not run, and "doesn't work" is not descriptive enough. The error lies in how you are including the twbs-pagination file. I included this from a cdn and it *does* work. Here is an image of the relevant source code https://i.imgur.com/bzy9xFw.png, and of the html result https://i.imgur.com/W05dtjr.png — Dexygen, Dec 28 '17 at 02:20
@GeorgeJempty It worked :( . But feeling regret, why did i try to using assign by dot or brackets. It killed lots of time. Thanks. Can you help me to improve this question? I got 3 negetive impressions on my question. — Rubel Ahmed, Dec 28 '17 at 02:23
`obj.visiblePages = myVar;` works too, but square brackets don't. Please read the first answer to the question in the automatic comment generated on my behalf "Possible duplicate of...." to understand the difference of how to use dot vs square-bracket notation. I don't think much of anything can be done to improve this question, just try to more thoroughly debug your code for errors next time. — Dexygen, Dec 28 '17 at 02:27
@GeorgeJempty When you do this, `obj.visiblePages = myVar;` what do you write in the `var obj = $('#pagination').twbsPagination({ totalPages: 30, visiblePages: 5, onPageClick: function (event, page) { //console.info(page); } });` visiblePages in obj, do you keep this or ommit from the obj? — Rubel Ahmed, Dec 28 '17 at 02:42
I commented out `visiblePages: 5`, and put `obj.visiblePages = myVar` at the bottom: https://i.imgur.com/H5CnrLn.png — Dexygen, Dec 28 '17 at 02:42
@GeorgeJempty i'm sorry, i took your enough time.You can try if you have time. `obj.totalPages = myVar;` not working. — Rubel Ahmed, Dec 28 '17 at 03:22
Maybe it's your browser because here it is working for me in Chrome: https://i.imgur.com/NuqgE4t.png — Dexygen, Dec 28 '17 at 12:53

score 0 · Answer 1 · answered Dec 28 '17 at 02:55

Your problem is that you're adding a property to $('#pagination') instead of editing an option of .twbsPagination().

You can't edit the option the way you're trying. You need a different approach.

The easiest way to fix this is to include the variable in the options object:

$(function () {
    var myVar = 5;
    var obj = $('#pagination').twbsPagination({
        totalPages: myVar, /* I changed here */
        visiblePages: 5,
        onPageClick: function (event, page) {
            //console.info(page);
        }
    });
    obj[totalPages] = myVar; //or
    //obj.totalPages = myVar;
    //console.info(obj.data());
    //console.log(obj);
});

However, if you can't, then you need to follow the documentation under Dynamic total pages number.

var $pagination = $('#pagination');
var defaultOpts = {
  visiblePages: 5,
  onPageClick: function(event, page) {
    //console.info(page);
  }
};
$pagination.twbsPagination(defaultOpts);

/* Then when you want to change it */
var myVar = 5;
var currentPage = $pagination.twbsPagination('getCurrentPage');
$pagination.twbsPagination('destroy');
$pagination.twbsPagination($.extend({}, defaultOpts, {
  startPage: currentPage,
  totalPages: myVar
}));

Let me know if you have any more questions!

Its not working when i'm adding dynamically a value in an object variable

1 Answers1