首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将DataTables pagingType:input属性设置为只读?

要将DataTables的pagingType属性设置为只读,可以通过以下步骤实现:

  1. 首先,确保你已经引入了DataTables的相关库文件和样式表。
  2. 在初始化DataTables之前,创建一个自定义的分页控件模板,并将pagingType属性设置为"input"。例如:
代码语言:javascript
复制
$.fn.dataTableExt.oPagination.input = {
    "fnInit": function (oSettings, nPaging, fnCallbackDraw) {
        var nInput = document.createElement('input');
        nInput.type = 'text';
        nInput.style.width = '50px';
        nInput.style.display = 'inline-block';
        nInput.value = oSettings._iDisplayStart + 1;
        nInput.onkeypress = function (e) {
            if (e.keyCode == 13) {
                var iNewStart = oSettings._iDisplayLength * (this.value - 1);
                if (iNewStart >= oSettings.fnRecordsDisplay()) {
                    iNewStart = 0;
                }
                oSettings._iDisplayStart = iNewStart;
                fnCallbackDraw(oSettings);
            }
        };
        nPaging.appendChild(nInput);
    },

    "fnUpdate": function (oSettings, fnCallbackDraw) {
        var oPaging = oSettings.oInstance.fnPagingInfo();
        var nInput = $(oSettings.aanFeatures.p)[0].getElementsByTagName('input')[0];
        nInput.value = oPaging.iPage + 1;
    }
};
  1. 在初始化DataTables时,将pagingType属性设置为"input",并指定自定义的分页控件模板。例如:
代码语言:javascript
复制
$('#example').DataTable({
    pagingType: 'input',
    oPaginate: {
        "sPaginationType": "input"
    }
});

这样就可以将DataTables的pagingType属性设置为只读。用户将无法手动修改分页输入框中的值,只能通过其他方式改变当前页码。

注意:以上代码示例中的"example"是一个表格的ID,你需要根据实际情况进行修改。

关于DataTables的更多详细信息和用法,你可以参考腾讯云的产品介绍页面:DataTables

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

dataTable参数说明

的时候,参数属性才有意义,当serverSide开启,DataTables组件会自行封装一个信息类发送给服务 端,而ajax.data仅仅是对这个信息类进行调整和添加....,注意在默认设置下,所有列的数据都会参与过滤.比如当这个属性”a”的时候,任何一个列只要包含”a”的行就会被显示.空表示全部 String 无 search.caseInsensitive...search.smart 禁用获取启用DataTables控件内置的只能过滤算法,这个算法会把搜索字符串进行分割并只能搜索,关闭这个算法仅仅实现简单的字符串查找,false关闭 Boolean...columns.type 通过设置列的类型让控件在排序和过滤这个列是能更好的处理这个列的数据,比如日期,货币等.具体种类很多请参考这里: http://datatables.net/reference...settings: 当前DataTables控件的setttings对象 Function 无 可以看到,DataTables的Options设置还是比较全面和丰富的,当然Options

4.5K20

jquery datatables之Requested unknown parameter for row column

jquery datatables是一款应用特别广泛的表格js插件,只需进行简单的设置就可以运行起来,更多详情可以参考官网:https://www.datatables.net/manual/index...比较常见的配置片段,注意上面标红部分,如果userName属性null或者undefined,那么表格在绘制过程中就会出现“DataTables warning: table id=example -...jquery datatables column属性时候设置的defaultContent,也就是说如果我们设置defaultContent属性null,那么获取不到该列对应的属性时就会弹出上面的错误提示...,相反如果我们在设置defaultContent属性设置""--空字符串,那么及时该单元格没有数据也不会弹出上面的错误提示框,俗话说:万事有利必有弊,弹窗有一个明显的好处就是让我们立即知道数据有问题...,但是如果有些单元格确实可以为空(什么都不现实),那么就可以设置defaultContent属性空字符传,否则推荐设置defaultContent属性null。

83210

HTML基础知识之表单

; action:表单的属性之一,用于指示服务器上处理表单输出的程序; method:表单属性之一,此属性告诉浏览器如何将数据发送给服务起,指定向服务器发送数据的方法,是用post或者get; image.png 二、GET 方法和POST 方法的区别 Get方法: GET 请求可被缓存; GET 请求保留在浏览器历史记录中; GET 请求可被收藏书签; GET 请求不应在处理敏感数据时使用...; GET 请求有长度限制; GET 请求只应当用于取回数据; POST方法: POST 请求不会被缓存; POST 请求不会保留在浏览器历史记录中; POST 不能被收藏书签; POST 请求对数据长度没有要求...)三种按钮 reset按钮:重置按钮,将表单重置最初状态; submit按钮:提交按钮,用户单击按钮后,表单将会提交到action属性所指的URl,并传递表单数据; button按钮:普通按钮,需要与事件关联使用...; 四、表单的只读与禁用设置 readonly:只读,网站服务器方不希望用户修改的数据,这些数据在表单元素中显示; disabled:禁用,只有满足某个条件后,才能选用某项功能; 禁用的表单不会被提交;

1K30

jquery.datatables 分页功能

这是一组数据源对象,每行一个,将由DataTables使用。请注意,该参数的名称可以使用ajax选项的dataSrc属性更改。...} 除了控制整个表的上述参数之外,DataTables还可以对每个行的数据源对象使用以下可选参数,您执行自动操作: { DT_RowId -- str // 将tr节点的ID属性设置为此值...DT_RowAttr -- object // 将对象中包含的数据添加到行tr节点作为属性。对象键用作属性键,值作为对应的属性值。这是使用jQueryparam()方法执行的。...组态 DataTables中的服务器端处理通过使用该serverSide选项启用。只需设置它true,DataTabels将在服务器端处理模式下运行。...在上面的例子中,我们使用它作为一个字符串,它指示DataTables使用其默认设置进行Ajax请求。但是,您可以通过ajax作为对象传入来自定义这些设置

4.8K20

dataTables 使用ajax 和服务器处理 获取数据

datatables datatables Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。...官网:https://datatables.net/ 中文网:https://datatables.club/ 使用datatables 使用这个很简单,只需要引入两个静态文件 <script src=...ajax 获取数据实现表格 通过ajax 可以通过对象数据 和数组数据 来着实现 通过对象数据 你的对象数据格式应该是这样的,对象数据格式就是json格式的 默认获取的是data下面的数据,可以在请求的时候设置...dataSrc自定义数据属性名 { "data":[ { "name": "Tiger Nixon", "position": "System...data":"extn"}, ] }); 本文由 Alone88 创作,采用 知识共享署名4.0 国际许可协议进行许可 本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名 最后编辑时间:

5K32

datatables应用程序接口API

Datatables有一个强大的api,用来处理表格上的数据,你可以添加数据到已经存在的表格,或者对已经存在的数据进行操作。...order.listener()API 在一个元素上一个给定列添加一个排序监听 page()API 获得或者设置表格当前页 page.info()API 获得表格的分页信息 page.len()API...) 名称 说明 column().cache()DT 从缓存的数据里获取选中的列 column().data()DT 获取选中列单元格的值 column().dataSrc()DT 获取选中列数据源的属性名...不明白用意) columns().cache()DT 获取表格缓存里被选中的列 columns().data()DT 获取被选中列的单元格数据 columns().dataSrc()DT 获取选中列的数据源属性名称...给结果集数据以字符连接然后返回一个字符串 lastIndexOf()DT 返回与字符相匹配第一次出现的位置(从后往前) lengthDT 返回结果集的长度 map()DT 通过回调函数,创建一个新的结果集 pluck()DT 返回指定属性结果集

4.4K30

在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView

设置项目 现在,创建一个新的 ASP.NET MVC 5 Web 应用程序。打开 Visual Studio 2015,点击文件>>新建>>项目。 ?...我们将在数据库上下文中 Asset 表添加一个属性,这个属性将会成为 Asset 表的实体框架代表,用来创建脚本。...ApplicationDbContext Create() { return new ApplicationDbContext(); } } 以上是 ASP.NET identity 2.0 的默认实体框架设置...assetListVM.init(); }); 我们已经在 init 函数中编写了数据表初始化代码,在 init 函数中,我们设置 serverSide...属性 true,这也就告诉表格会在服务器端进行分页,过滤和排序,现在所有的数据不会立刻加载,而是第一页数据会默认展示出来,更多的数据会当用户触发时才加载,处理的属性会在检索行为中显示这个加载过程。

5.4K80

jquery datatable 参数

以下是在进行dataTable绑定处理时候可以附加的参数: 属性名称 取值范围 解释 bAutoWidth true or false, default true 是否自动计算表格各列宽度 bDeferRender...当这个标志true的时候,分页器就默认关闭 bSort true or false, default true 开关,是否让各列具有按列排序功能 bSortClasses true or false,...class风格,会自动循环 bDestroy true or false, default false 用于当要在同一个元素上执行新的dataTable绑定时,将之前的那个数据对象清除掉,换以新的对象设置...用于指定一屏显示的条数,需开启分页器 iDisplayStart 整数,默认为0 用于指定从哪一条数据开始显示到表格中去 iScrollLoadGap 整数,默认为100 用于指定当DataTable设置滚动时...lfrtip (when bJQueryUI is false) or t (when bJQueryUI is true) 这是用于定义DataTable布局的一个强大的属性

18510
领券