Home ellipse comes after last button in datatable jquery plugin
Reply: 0

ellipse comes after last button in datatable jquery plugin

user5491 Published in August 15, 2018, 11:17 am

The ellipse comes after last in page i have used sPaginationtype as well but still it gives me no change.

Below in my code

 table = $("#gridTable").DataTable({
            "pageLength": tableInfo.length,
            "displayStart": tableInfo.start,
            "processing": true,
            "searching": false,
            "serverSide": true,
            "sPaginationType": "full_numbers",
            "order": tableInfo.order,
            "dom": '<"top">rt<"grid-bottom clearfix"lip>',
            "language": {
                "lengthMenu": "Page Size &nbsp; _MENU_ ",
                "info": "Records _START_ to _END_ of (_TOTAL_)",
                "emptyTable": "No Record(s) Found"
            "ajax": {
                url: '@Url.Action("SearchCountry")',
                type: "post",
                data: BuildSearchCriteria()
            "columns": columns,
            "drawCallback": function (settings) {
                var api = this.api();
                if (api.rows({ page: 'current' }).data().length <= 0) {
                else {
            "rowCallback": function (row, data, index) {
                row.className = "ubs-row";
                return row;

.cshtml page

<div class="clearfix">
<div class="table-title">
        <a class="btn sm-btn btn-icon btn-primary" href="@Url.Action(Actions.ManageCountry)"><img class="icon" src="@Url.Content("~/images/add-icon.png")" alt=""><sapn>Add Country</sapn></a>
<div class="table-responsive grid-table">
    <table class="table table-hover" id="gridTable"></table>

css related to this classes

.table-title {display:table; width:100%; padding-top:15px; padding-bottom:15px;   }
.table-title h5 {padding-bottom:0px; font-weight:700; color:#565656;  }
.table-title> div {display:table-cell;vertical-align:middle; }
.table-title> div .btn {float:right; margin-left:10px;  }

    .clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

.grid-table.table-responsive {border:0px; margin-bottom:0px;}
.grid-table .table {margin-bottom:0px; border:1px solid #e1e1e1; }
.grid-table .table>thead>tr>th,  
.grid-table .table>tbody>tr>th, 
.grid-table .table>tfoot>tr>th,
.grid-table .table>thead>tr>td, 
.grid-table .table>tbody>tr>td, 
.grid-table .table>tfoot>tr>td {color:#535353; font-size:14px; font-weight:normal; vertical-align: middle; padding:16px 15px; border-bottom:1px solid #e1e1e1; }
.grid-table .table>thead>tr>th {color:#535353; font-size:16px; font-weight:700; background-color:#f6f6f6; white-space: nowrap;}
.grid-table .table .actions {width:110px;}
.grid-table .table .actions a {padding:0px 5px; vertical-align:middle; float:left; }
.grid-table .table .actions a:hover {opacity:0.5;}

.table-hover>tbody>tr:hover {background-color: #f9f9f9;}
.grid-table .table .icheckbox_square {position: relative !important; margin:auto; float:left;}
.grid-table .table .stop {width:100px; text-align:center;}

.grid-bottom{background:#fff;padding:15px;border:1px solid #e1e1e1; border-top:0px; margin-bottom:30px;   }
.paginetion{float:right; margin-top:5px; }
.paginetion ul{margin:0px;padding:0px;list-style-type:none;}
.paginetion ul li{padding:0;margin:0px;display:inline;}
.paginetion ul li a{font-size:14px; color:#565656;text-decoration:none;background:#fff;border:1px solid #d7d7d7; margin:0px 0px  0px -1px;padding:0px;height:38px;width:38px; line-height:37px;text-align:center;display:block;float:left;}
.paginetion ul li a.active,.paginetion ul li a.active:hover{color:#FFF;text-decoration:none;border:none;background:#1f79cd;}
.paginetion ul li a.prevar{background:url('../images/left-arrow.png') no-repeat center #fff;}
.paginetion ul li a.nxtar{background:url('../images/right-arrow.png') no-repeat center #fff;}
.paginetion ul li a:hover{text-decoration:none;background-color:#f0f0f0; color:#000;}

.show-record{float:left;font-size:16px;color:#616161;padding-left:0px; margin-top:2px;  }
.show-record .form-label{display:inline-block; margin-left:10px;}
.show-record .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn), .show-record .bootstrap-select {min-width:80px; width:auto; display:inline-block;}
.show-record .btn {min-width:80px; }

As per the suggestion i have added the code of css file as well.so please do consider this for giving reply of this problem

Please Kindly help to solve this issue

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.295178 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO