Datatables Localization Example

Websolutionstuff | May-10-2021 | Categories : Laravel

In this post i will show you datatables localization example, jquery datatable plugin can localize all the displayed strings by setting the localization property to default localization members. localization of datatable column headings or website localization is the process of rendering your app in multiple languages.

Laravel localization features provide a convenient way to retrieve text in diffrent languages here we are using in jquery datatable.

Step 1 : Create Localization File

In this Laravel Localization Example we will Create localization file in language wise. here i create two file First one for English and second one is Chinese.

1. resources/lang/en/message.php
2. resources/lang/zhh/message.php

 

Step 2 : Add Localization Code in Blade File

Now, add below code in your script tag.

Example 1 : Using Trans
"language": {
           "emptyTable":     "{{trans('datatable.General.emptyTable')}}",
           "info":           "{{trans('datatable.General.info')}}",
           "infoEmpty":      "{{trans('datatable.General.infoEmpty')}}",
           "infoFiltered":   "{{trans('datatable.General.infoFiltered')}}",
           "lengthMenu": "{{trans('datatable.General.lengthMenu')}}",
           "loadingRecords": "{{trans('datatable.General.loadingRecords')}}",
           "processing":     "{{trans('datatable.General.processing')}}",
           "search":         "{{trans('datatable.General.search')}}",
           "searchPlaceholder": "{{trans('datatable.General.searchPlaceholder')}}",
           "zeroRecords":    "{{trans('datatable.General.zeroRecords')}}",
}

 

Example 2 : Using Json

 

language: {
            paginate: { 'first': 'First', 'last': 'Last', 'next': '→', 'previous': '←' },
            emptyTable:     @json(__('datatable.General.emptyTable')),
            info:           @json(__('datatable.General.info')),
            infoEmpty:      @json(__('datatable.General.infoEmpty')),
            infoFiltered:   @json(__('datatable.General.infoFiltered')),
            loadingRecords: @json(__('datatable.General.loadingRecords')),
            processin:     @json(__('datatable.General.processing')),
            zeroRecords:    @json(__('datatable.General.zeroRecords')),
            lengthMenu: @json(__('datatable.General.lengthMenu')),
            search:         @json(__('datatable.General.search')),
            searchPlaceholder: @json(__('datatable.General.searchPlaceholder')),
}   

 

Now, we need to create array in this file location resources/lang/zhh/datatable.php file 

<?php

return [

    'General' =>
    [
        'Cancelled' => '取消',
        'Delete' => '删除',
        'Delivered' => '递送',
        'Edit' => '修改',
        'emptyTable' => '表中没有可用数据',
        'History' => '历史记录',
        'info' => '显示_TOTAL_条目的_START_到_END_',
        'infoEmpty' => '显示0个条目中的0到0',
        'infoFiltered' => '(从_MAX_条目总数中过滤)',
        'lengthMenu' => '显示:_MENU_',
        'loadingRecords' => '加载中...',
        'processing' => '处理中...',
        'search' => '搜索:',
        'searchPlaceholder' => '搜索记录',
        'zeroRecords' => '没有找到匹配的记录',
    ],
]
?>

 

Recommended Post
Featured Post
Laravel 10 AJAX CRUD Operations Example
Laravel 10 AJAX CRUD Operation...

In this article, we will see the laravel 10 ajax crud operations example. Here, we will learn about ajax crud operation...

Read More

Feb-27-2023

How To Open Datepicker Popup In Angular 15 Material
How To Open Datepicker Popup I...

In this tutorial, I will guide you through the process of opening the datepicker popup in the Angular 15 Material framew...

Read More

Jul-10-2023

Drag and Drop File Upload Using Dropzone js in Laravel 8
Drag and Drop File Upload Usin...

This article will show drag and drop file upload using dropzone js in laravel 8. DropzoneJS is an open-source library th...

Read More

Oct-20-2020

Laravel 8 Left Join Query Example
Laravel 8 Left Join Query Exam...

In this tutorial I will give you laravel 8 left join query example. laravel left join eloquent returns all rows from the...

Read More

Nov-26-2021