Pagination Example

Pagination with Bootstrap

by karthick Chandran

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://www.solodev.com/assets/pagination/jquery.twbsPagination.js"></script>

<select multiple="multiple" class="form-control"  id="tags" style="width: 400px;"  value="test" name="tags">

    <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>

</select>

CSS

.container {
  margin-top: 20px;
}
.page {
  display: none;
}
.page-active {
  display: block;
}

JavaScript

$("#tags").select2(
    {
  
        allowClear: true,
        tags: true,
        tokenSeparators: [',', ' '],

        ajax: {
            url: "/Entry/ReadSelect2DataMulti",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term,
                    page: params.page || 1
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;
                return {
                    results: data
                };
            },
            cache: true,
            error: function (xhr, textStarus, error) {
            }
        },
        minimumInputLength: 2,
        placeholder: "აირჩიეთ პოზიცია",
        templateResult: function (state) {
            var result = '<div class="pos-template">' + '<span title=""><b>' + state.text + '</b></span>';
            if (state.content != null && state.content != '') {

                var tags = state.content.split(",");
                for (i = 0; i < tags.length; i++) {
                    result = result + '<span class="pos-tag">' + tags[i] + '</span>';
                }
            }
            result = result + '</div></div>';

            return $(result);
        },
        id: function (object) {
            return object.text;
        },
        language: {
            noResults: function () {
            },
            inputTooShort: function () {
                return "შეავსეთ მინიმიმ 2 სიმბოლო";
            },
            loadingMore: function () {
                return 'იტვირთება...';
            },
            searching: function () {
                return 'იფილტრება...';
            }
        },
    }
);