Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to change default messages of data tables?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2
    • 0
    • 796
    Comment on it

    Hello Reader, If you are using data tables in your web website and want to change default message of it then in this blog you can see how to change them. 

    Now-a-days, Data tables are getting very popular because of its real-time instant searching, sorting and filtering functionality. Data tables come with their default messages like, detail of number of records, searching and pagination counting. Now we will change these messages and put our message so let's get started doing this:-


    The following example will also work for multilingual website where you can put two message in to different language 

    Step1:- Create a new data table and give it  a ID, It's html code will go like this:-

    <table id="iwon" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Start Bid Price</th>              
                    <th>Closing On</th>
                </tr>
            </thead>
          
            <tbody>
    
          <tr>
          <th><?php print_r($won['listing_id']);  ?></th>        
          <th><?php print_r($won['listing_title']);  ?></th>               
          <th><?php print_r($won['auction_start_price']);  ?></th>
          <th><?php print_r(date("d M Y h:i a",strtotime($won['expiry_date']))); ?> </th>
          </tr>
     
            </tbody>
    </table>   

    In code above we have created and simple table in html and created it's header and body. In the body you can print as much as records you want to show. 


     

    Step2:- Second we will create our custom messages which will replace data tables custom messages and show for both the English and Arabic language. This will define inside an array and it's code will go like this:-
     

       <?php
    $msg['english']['emptyTable'] = 'No data available in table';
    $msg['arabic']['emptyTable'] = '    '; 
    
    $msg['english']['sInfo'] = 'Showing _START_ to _END_ of _TOTAL_ entries';
    $msg['arabic']['sInfo'] = ' _START_  _END_  _TOTAL_ ';
    
    $msg['english']['sInfoEmpty'] = 'Showing 0 to 0 of 0 entries'; 
    $msg['arabic']['sInfoEmpty'] = ' 0  0  0 '; 
    
    
    $msg['english']['lengthMenu'] = 'Show _MENU_ entries';
    $msg['arabic']['lengthMenu'] = ' _MENU_ '; 
    
    $msg['english']['first'] = 'first english';
    $msg['arabic']['first'] = 'first arabic'; 
    
    $msg['english']['previous'] = 'Previous';
    $msg['arabic']['previous'] = ''; 
    
    $msg['english']['next'] = 'Next';
    $msg['arabic']['next'] = '';  
    
    $msg['english']['last'] = 'last english';
    $msg['arabic']['last'] = 'last arabic'; 
    
    $msg['english']['sSearch'] = 'Search';
    $msg['arabic']['sSearch'] = ''; 
    
    
      if(isset($this->session->userdata["lang"])&&$this->session->userdata["lang"] =="english"){ 
        $language =  "english" ;
          }elseif (isset($this->session->userdata["lang"])&&$this->session->userdata["lang"] =="arabic") {
           $language = "arabic" ;
          }else{  
        $language = "arabic" ;
      } 
    ?>

    In the code above we have declare two key (English and Arabic) for every custom messages. This message will have your own messages. For example default message for no records of data table is "No records is to display" and you can see we have replace this line by "No data available in table" in english.

     

    Step3: Now the final work part of this is to set this message inside the Data table plugin. This is done by javascript script. And its code will go like this:-
     

    <script type="text/javascript">
    
    $('#iwon').dataTable( {
        "language": {
          "emptyTable": <?php echo json_encode($msg[$language]['emptyTable']) ?>,
          "sInfo": <?php echo json_encode($msg[$language]['sInfo']) ?>,
          "sInfoEmpty": <?php echo json_encode($msg[$language]['sInfoEmpty']) ?>,
          "lengthMenu": <?php echo json_encode($msg[$language]['lengthMenu']) ?>,
          "sSearch": <?php echo json_encode($msg[$language]['sSearch']) ?>,
          "paginate": {
            "first":  <?php echo json_encode($msg[$language]['first']) ?>,
            "previous": <?php echo json_encode($msg[$language]['previous']) ?>,
            "next": <?php echo json_encode($msg[$language]['next']) ?>,
            "last": <?php echo json_encode($msg[$language]['last']) ?>
        },
    
        }
    } );
    </script>

    Now you just have to run this code and the output of this is as shown in the screenshot as below with both in English and Arabic messages

     

    How to change default messages of data tables?

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: