化石原创文章,转载请注明来源并保留原文链接


Javascript用来控制表格显示的库有不少,Datatables是比较出名的一个。用这个表格的时候,内部有不少地方是它自己的显示内容,比如每页显示多少、当前第几页共多少页等选项处的显示。这些地方不能用html的方式控制。不过这样使用广泛的库,人家早就想好了帮你解决的方式。

在初始化表格的时候,我们可以使用language来改变语言,大致格式如下:

$('#example').DataTable( {
        "language": {
            "lengthMenu": "Display _MENU_ records per page",
            "zeroRecords": "Nothing found - sorry",
            "info": "Showing page _PAGE_ of _PAGES_",
            "infoEmpty": "No records available",
            "infoFiltered": "(filtered from _MAX_ total records)"
        }
    } );

上面是官方的例子。也就是我们如果想改变内置的一些显示,只要通过language这个属性即可。比如,上方的第一个lengthMenu,在默认的语言中,显示的是“Show x Entries”的字眼,x是一个可以选择的下拉框。如果我们想改成中文,那么只要改lengthMenu内容为:每页显示记录 _MENU_。

也就是,上面的内容,改成如下:

$('#example').DataTable( {
        "language": {
            "lengthMenu": "每页显示记录 _MENU_",
            "zeroRecords": "Nothing found - sorry",
            "info": "Showing page _PAGE_ of _PAGES_",
            "infoEmpty": "No records available",
            "infoFiltered": "(filtered from _MAX_ total records)"
        }
    } );

官方所有的可改的列表如下:

{
    "decimal":        "",
    "emptyTable":     "No data available in table",
    "info":           "Showing _START_ to _END_ of _TOTAL_ entries",
    "infoEmpty":      "Showing 0 to 0 of 0 entries",
    "infoFiltered":   "(filtered from _MAX_ total entries)",
    "infoPostFix":    "",
    "thousands":      ",",
    "lengthMenu":     "Show _MENU_ entries",
    "loadingRecords": "Loading...",
    "processing":     "Processing...",
    "search":         "Search:",
    "zeroRecords":    "No matching records found",
    "paginate": {
        "first":      "First",
        "last":       "Last",
        "next":       "Next",
        "previous":   "Previous"
    },
    "aria": {
        "sortAscending":  ": activate to sort column ascending",
        "sortDescending": ": activate to sort column descending"
    }
}

当然,各个版本可能会改动,所以官方的这个地址如下:

https://datatables.net/reference/option/language


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


bootstrap-typeahead是个javascript库,作用是在输入的时候,弹出提示框,帮助快速完成用户需要的输入。最常用的场合是:在用户输入的时候,前端通过ajax访问服务器,服务器从用户当前输入的字符,从数据库中寻找到含有该字符的合适字符串数组,然后返回给前端的typeahead运行库,typeahead负责显示列表框,辅助用户输入。

在使用ajax获取合适的数据的过程中,现在typeahead需要结合另外一个javascript库:bloodhound.js。

实际准备工作:

1、github上得到bootstrap-typeahead.min.js

地址:https://github.com/iqbalfn/bootstrap-typeahead/tree/master/dist/js

2、通过npm得到bloodbound.min.js

命令:npm install bloodhound-js –save

通过上面的命令,可以在当前目录下载到bloodhound.js的工程,对应的min.js在node_modules目录的bloodhound-js目录的dist目录下

实际代码工作:

1、在需要的html中引入bloodhound.min.js和bootstrap-typeahead.min.js (JQuery库一般都是常用的,这里默认大家都先引入)

譬如:

<script src="plugin/bloodhound.min.js"></script>
<script src="plugin/bootstrap-typeahead.min.js"></script>

2、自己的javascript中,在某个初始化的地方,初始化typeahead的绑定工作:(a)绑定typeahead和bloodhound实例;(b)绑定typeahead和html中的某个输入元素

举例:

$(document).ready(function() {
// Instantiate the Bloodhound suggestion engine
    var authors = new Bloodhound({
        datumTokenizer: function(datum) {
            return Bloodhound.tokenizers.whitespace(datum.value);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            wildcard: '%QUERY',
            url: 'http://127.0.0.1:8080/api/getjson',
            transform: function(response) {
                // Map the remote source JSON array to a JavaScript object array
                return $.map(response.data, function(data) {
                    return {
                        name: data
                    };
                });
            }
        }
    });
,
    // Instantiate the Typeahead UI
    $('#author-search').typeahead(null, {
        display: 'name',
        source: authors,
        limit: 1000, //如果这个不填,默认是搜索到的结果,也就是上面的transform.$.map返回结果的-1个
    });
});

上面例子中的第1行,说明了我们是在document准备好就开始做这个工作,这个也是常见的用法。

第23行,我们绑定了typeahead和html中一个id为author-search的input元素。这里同时也初始化了typeahead实例:(1)display的name和第15的name是一起运作的;(2)source指定了数据源从第3行的变量(方法)得到;(3)limit这个是个配置的值,如果不指定的话,那么如果ajax返回n个值,在typeahead中显示出来的,必定是n-1个。会看起来少一个值,这里注意。

第8行,说明了我们这个的数据从远程服务器得到,而不是本地。这里通过第10行配置一个可以访问的url,bloodhound会使用ajax(xmlHttpRequest)等手段访问该url(Get方式),该url必须返回json格式的数据。

第9行,wildcard是一个占位符,实际的作用是在url指定中,我们可以指定参数,比如“http://127.0.0.1:8080/api/getjson?id=%QUERY”,这里的%QUERY就是每次ajax访问(这个访问有typeahead根据内部策略发起)的时候,用户在input元素中已经输入的字符串。有这个字符串,我们的后台程序就知道用户现在输入了什么,就可以在给前端返回数据前根据这些输入的字符串做一次过滤。

第11行,transform方法回调是bloodhound用来在远程数据得到后做处理的地方。关键是参数response,这个参数如果放断点看到是null的时候,你就知道你的url返回的不是json格式。

如果正确的话,那么response就是远程返回的json数据。检查远程返回的数据是否json的话,最简单的就是使用Postman这个工具给对应的url发个Get请求,如果返回的数据在Postman中清晰的看到是json,那么如果第13行如果有断点,就能被击中。

第13行,在typeahead应用场景中,一般远程返回的json数据中,必定有一个栏位是数组形式(因为肯定是多个选择才会出列表)。这里是通过第一个参数定位response中哪个是列表,然后列表中的每个元素,哪个值是我们最后的typeahead需要的(第二个参数是每个列表的元素的句柄)。

以13和15行为里,这里我们返回的response json数据中,应该有这样的形式:

{“data”:[“string1”, “string2”]}

参数response.data就是[]的句柄,参数data第一次是string1、第二次是string2。

要就是bloodhound会循环数组中的每个元素(根据15行的规则,这里我们只是把string1、string2拷贝给每个name),得到最后喂给typeahead的数组。

这里要说的是,response的json格式,因为bloodhound的transform,完全就可以是任意格式。比如,我们上面的response,可以是

{“result”: 200, “description”: “OK”, “data”:[“string1”, “string2”]}

如果data数组里面的并不是单一的string,也是对象,比如

{“data”:[ {“name”:”joe”}, {“name”:”kylin”}]}

那么我们上面的transform代码就要改成:

transform: function(response) {
                return $.map(response.data, function(data) {
                    return {
                        name: data.name
                    };
                });
            }

因为这个时候,参数2其实都是json的一个对象格式。

第15行的name,这个名字完全是由24的display后面的字符决定的,如果24行改成了display: ‘value’,那么这里的name就需要变成value。


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


第一个查的地方是Chrome的cache。如果你总是要删除历史后才能得到更新的javacript,那么就是这个cache的原因。你需要做的是让Chrome不cache。

步骤是:

1、Chrome的调试面板

2、Network标签点击

3、找到Disable cache,打上勾


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


html中我们可以通过DOM方法得到每个元素的句柄,从而得到这个html对象(或者说是dom对象,在这里都是一个意思)。JQuery作为使用非常方便的辅助库,几乎在所有的javascrip中被使用。

不过在很多地方,我们往往使用原来的html(javascript)对象,比如,在一个元素被点击后,我们如果实现这个点击后的方法,参数中用this,就代表了这个元素。这个时候,原始的句柄是html对象,而不是JQuery。这种情况下,两者之间的转化就成了必需品。这里提供解决方案。

1、html对象转化成JQuery对象:

只要用$()包装,就可以得到JQuery对象。

举例:

var elementHandle = document.getElementById('elementid');
var jqueryElementHandle = $(elementHandle);

2、JQuery对象转化成html对象

通过下标得到html对象

比如:

var jqueryElementHandle = $('#DOM id');
var htmlElementHandle = jqueryElementHandle[0];
//或者
var htmlElementHandle = jqueryElementHandle.get(0);

化石原创文章,转载请注明来源并保留原文链接