After did some research on datatable.js. I found a solution.

HTML:

$('#tblSessionList').DataTable({

                language: {

                    paginate: {

                        next: '<span class=glyphicon glyphicon-menu-right></span>',

                        previous: '<span class=glyphicon glyphicon-menu-left></span>'

                    }

                },

                bPaginate: true,

                sPaginationType: custom,

                bLengthChange: false,

                columnDefs: [

                    { targets: 0, orderable: true },

                    { targets: 1, orderable: false },

                    { targets: 2, orderable: false }



                ],

                bFilter: true,

                bInfo: false,

                bAutoWidth: false,

                searching: false,

                scrollX: true

            });

Here is all you need to change in datatable.js:

$.extend(true, DataTable.ext.renderer, {

    pageButton: {

      _: function(settings, host, idx, buttons, page, pages) {

        var classes = settings.oClasses;

        var lang = settings.oLanguage.oPaginate;

        var aria = settings.oLanguage.oAria.paginate || {};

        var btnDisplay,

          btnClass,

          counter = 0;



        var attach = function(container, buttons) {

          var i, ien, node, button;

          var clickHandler = function(e) {

            _fnPageChange(settings, e.data.action, true);

          };



          for (i = 0, ien = buttons.length; i < ien; i++) {

            button = buttons[i];



            if ($.isArray(button)) {

              var inner;

              if (settings.sPaginationType == custom) {



                inner = $(

                  <span class='custom-pagination'> Page  + parseInt(page + 1) +  of  + pages +  </span>

                ).appendTo(container);

              } else {

                inner = $(< + (button.DT_el || div) + />).appendTo(

                  container

                );

                attach(inner, button);

              }

            } else {

              btnDisplay = null;

              btnClass = ;



              switch (button) {

                case ellipsis:

                  container.append('<span class=ellipsis>&#x2026;</span>');

                  break;



                case first:

                  btnDisplay = lang.sFirst;

                  btnClass =

                    button +

                    (page > 0 ?  :   + classes.sPageButtonDisabled);

                  break;



                case previous:

                  btnDisplay = lang.sPrevious;

                  btnClass =

                    button +

                    (page > 0 ?  :   + classes.sPageButtonDisabled);

                  break;



                case next:

                  btnDisplay = lang.sNext;

                  btnClass =

                    button +

                    (page < pages - 1 ?  :   + classes.sPageButtonDisabled);

                    console.log(btnClass)

                  break;



                case last:

                  btnDisplay = lang.sLast;

                  btnClass =

                    button +

                    (page < pages - 1 ?  :   + classes.sPageButtonDisabled);

                  break;



                default:

                  // To Button

                  btnDisplay = button + 1;

                  btnClass = page === button ? classes.sPageButtonActive : ;

                  console.log(btnDisplay);

                  break;

              }



              if (btnDisplay !== null) {

//                 

                  node = $(<a>, {

                    class: classes.sPageButton +   + btnClass,

                    aria-controls: settings.sTableId,

                    aria-label: aria[button],

                    data-dt-idx: counter,

                    tabindex: settings.iTabIndex,

                    id:

                      idx === 0 && typeof button === string

                        ? settings.sTableId + _ + button

                        : null

                  })

                    .html(btnDisplay)

                    .appendTo(container);

//                 }



                _fnBindAction(node, { action: button }, clickHandler);



                counter++;

              }

            }

          }

        };



        // IE9 throws an 'unknown error' if document.activeElement is used

        // inside an iframe or frame. Try / catch the error. Not good for

        // accessibility, but neither are frames.

        var activeEl;



        try {

          // Because this approach is destroying and recreating the paging

          // elements, focus is lost on the select button which is bad for

          // accessibility. So we want to restore focus once the draw has

          // completed

          activeEl = $(host)

            .find(document.activeElement)

            .data(dt-idx);

        } catch (e) {}



        attach($(host).empty(), buttons);



        if (activeEl !== undefined) {

          $(host)

            .find([data-dt-idx= + activeEl + ])

            .focus();

        }

      }

    }

  });