将波斯语言设置为数据表

时间:2017-06-22 18:10:26

标签: javascript jquery html css datatable

我想在表格中添加波斯语的排序。我使用这个数据表

https://datatables.net

我添加了这个插件来排序我的表

https://datatables.net/plug-ins/sorting/persian

这是我的html文件

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="jquery.dataTables.min.css">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="persian.js"></script>

<script type="text/javascript" src="jquery.dataTables.min.js"></script>

<!-- jquery -->


<script type="text/javascript">
$(document).ready(function() {
   // $('#example').dataTable();
    $('#example').DataTable( {
       columnDefs: [{ type: "pstring" , targets: 0 }
        ]
     } );


});
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>هوشیار</td>
                <td>برنامه نویس</td>
                <td>تست</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>میلاد</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>پدر</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>



        </tbody>
    </table>
</body>
</html>

我按照这些链接中的配置进行了操作,但它没有工作,也没有对“گچپژ”这样的波斯语进行排序。

帮我解决这个问题,谢谢。

2 个答案:

答案 0 :(得分:1)

您在persian.js之前声明了jquery.dataTables.min.js文件。这是一个问题,因为persian.js取决于jquery.dataTables.min.js

错误:

persian.js:45 Uncaught TypeError: Cannot read property 'oSort' of undefined
    at persian.js:45
    at persian.js:59

如第45行所示,

jQuery.extend( jQuery.fn.dataTableExt.oSort, {

persian.js在对象oSort上查找属性jQuery.fn.dataTableExt,但它不存在。

将波斯文件放在数据表1之后:

<script type="text/javascript" src="jquery.dataTables.min.js"></script>
<script type="text/javascript" src="persian.js"></script>

Here is a Fiddle

答案 1 :(得分:0)

最后我将这个脚本添加到我的html文件中并且有效。我想尽管我在datatable.js下面添加了波斯文件,但之后没有加载!

<script type="text/javascript">
            var persianSort = ['آ', 'ا', 'ب', 'پ', 'ت', 'ث', 'ج', 'چ', 'ح', 'خ', 'د', 'ذ', 'ر', 'ز', 'ژ', 'س', 'ش', 'ص', 'ط', 'ظ', 'ع', 'غ', 'ف', 'ق', 'ک', 'گ', 'ل', 'م', 'ن', 'و', 'ه', 'ي', 'ي'];
            function GetUniCode(source) {
                source = $.trim(source);
                var result = '';
                var i, index;
                for (i = 0; i < source.length; i++) {
                    //Check and fix IE indexOf bug
                    if (!Array.indexOf) {
                        index = jQuery.inArray(source.charAt(i), persianSort);
                    } else {
                        index = persianSort.indexOf(source.charAt(i));
                    }
                    if (index < 0) {
                        index = source.charCodeAt(i);
                    }
                    if (index < 10) {
                        index = '0' + index;
                    }
                    result += '00' + index;
                }

                return 'a' + result;
            }
            jQuery.extend(jQuery.fn.dataTableExt.oSort, {
                "pstring-pre": function (a) {
                    return GetUniCode(a.toLowerCase());
                },

                "pstring-asc": function (a, b) {
                    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
                },

                "pstring-desc": function (a, b) {
                    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
                }
            });

        </script>